@charset "utf-8";
/* 홈 대시보드 */

/* 서브젝트 */
.subject-select-wrap { padding: 30px 45px 0; border-bottom: 1px solid rgba(62,25,68,.1); background: #fff; }
.subject-select-wrap ul { white-space: nowrap; cursor: pointer; overflow-x: auto; -ms-overflow-style: none; }
.subject-select-wrap ul::-webkit-scrollbar { display:none; }
.subject-select-wrap ul li { display: inline-block; margin-right: 20px; cursor: pointer; }
.subject-select-wrap ul li:last-child { margin-right: 0; }
.subject-select-wrap ul li a { display: block; font-size: 2rem; font-weight: bold; opacity: .3; transition: opacity .25s ease;  padding-bottom: 20px; position: relative; }
.subject-select-wrap ul li a:hover { opacity: .5; }
.subject-select-wrap ul li.select a:after { width: 100%; height: 3px; background: #7096ff; position: absolute; z-index: 2; left: 0; bottom: 0; content: ''; }
.subject-select-wrap ul li.select a { opacity: 1; }

/* 설명 */
.subject-content-wrap { padding: 35px 45px; }
.subject-content-wrap .description-wrap { min-height: 318px; position: relative; margin-bottom: 40px; padding: 30px 30px 90px; border-radius: 10px; background: #74abe5; background-image: url(../../img/disease/banner_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;}
.subject-content-wrap .description-wrap .txt-area { width: calc(100% - 404px); padding-left: 50px; float: right; padding-bottom: 40px; position: relative; z-index: 3;}
.subject-content-wrap .description-wrap .txt-area h1.name { font-size: 3rem; display: block; margin-bottom: 10px; color: #fff;}
.subject-content-wrap .description-wrap .txt-area .detail { font-size: 1.3rem; color: rgba(255,255,255,.8); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 133px; white-space: pre-line; }
.subject-content-wrap .description-wrap .txt-area .detail a { text-decoration: underline; color: #fff; cursor: pointer; }
.subject-content-wrap .description-wrap .txt-area .detail a:hover { color:rgba(255,255,255,0.8); }
.subject-content-wrap .description-wrap .txt-area #detail_on_off_toggle { display: none; }
.subject-content-wrap .description-wrap .txt-area .detail-btn { position: absolute; z-index: 2; bottom: 0; right: 0; width: calc(100% - 50px); height: 25px; background: #ffffff; text-align: center; border-radius: 3px; opacity: .5; transition: opacity .25s ease; }
.subject-content-wrap .description-wrap .txt-area .detail-btn:hover { opacity: .7; }
.subject-content-wrap .description-wrap .txt-area .detail-btn>div { display: block; height: 100%; font-size: 1.1rem; color: #91aeff; line-height: 25px; }
.subject-content-wrap .description-wrap .txt-area .detail-btn>div.on { display: none; }
.subject-content-wrap .description-wrap .txt-area .detail-btn>div .arrow { display: inline-block; width: 8px; margin-right: 5px; vertical-align: top; margin-top: 11px; }
.subject-content-wrap .description-wrap .txt-area .detail-btn>div.off .arrow { border-top: 5px solid #91aeff; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.subject-content-wrap .description-wrap .txt-area .detail-btn>div.on .arrow { border-bottom: 5px solid #91aeff; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.subject-content-wrap .description-wrap .txt-area #detail_on_off_toggle:checked ~ .detail-btn>div.on { display: block; }
.subject-content-wrap .description-wrap .txt-area #detail_on_off_toggle:checked ~ .detail-btn>div.off { display: none; }
.subject-content-wrap .description-wrap .txt-area #detail_on_off_toggle:checked ~ .detail { max-height: 999999px; display: -webkit-block; -webkit-line-clamp: 999999; }

.subject-content-wrap .description-wrap .img-area { width: 404px; text-align: center; }
.subject-content-wrap .description-wrap .img-area img { display:block; margin:0 auto; width:87%; height:100% }
.subject-content-wrap .description-wrap .img-area .name { font-size: 1.2rem; background: rgba(255,255,255,0.25); padding: 0 30px;line-height:25px; border-radius: 25px; color: #fff; margin-top: 25px; display: inline-block;}
.subject-content-wrap .description-wrap .img-area .relevant { position: absolute; width: 100px; right: 0; }
.subject-content-wrap .description-wrap .img-area .relevant img { width: 100%; }

.subject-content-wrap .description-wrap .related-keyword { /* width: calc(100% - 300px); padding-left: 80px; float: right; */ margin: 10px 0;  }
#info_container .subject-content-wrap .description-wrap .related-keyword p { font-size: 1.1rem; opacity: .7; display: block; margin-bottom: 5px; color: #e7e7eb; font-weight: 500; }
.subject-content-wrap .description-wrap .related-keyword a { font-size: 1.1rem; color: #fff; border: 1px solid #fff; height: 22px; line-height: 20px; padding: 0 15px; border-radius: 25px; display: inline-block; margin-right: 1px; margin-bottom: 4px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.subject-content-wrap .description-wrap .related-keyword a:hover { background: #4a79ff; border-color: #4a79ff; color: #fff; }

/* 제목 */
.icon-title { font-size: 1.6rem; font-weight: 800; display: block; margin-bottom: 15px; color:#91aeff}
.icon-title img { width: 20px; height: 20px; vertical-align: top; margin: 3px 5px 0 0; }

/* 관련기업 */
.enterprise-wrap { margin-bottom: 35px; }
.enterprise-list { position: relative; }
.enterprise-list ul { white-space: nowrap; cursor: pointer; overflow-x: auto; -ms-overflow-style: none; padding: 15px 15px 15px 40px; background: rgba(225,228,247,.5); border-radius: 8px; margin-bottom: 10px; }
.enterprise-list ul::-webkit-scrollbar { display:none; }
.enterprise-list ul li { width: calc(20% - 15px); display: inline-block; margin-right: 8px; }
.enterprise-list ul li:last-child { margin-right: 0; }
.enterprise-list ul li a { background: #fff; border-radius: 8px; border: 1px solid #dee3eb; width: 100%; height: 100%; display: block; overflow: hidden; text-align: center; transition: border-color .25s ease; line-height: 56px;  position: relative; padding-bottom:50%; height: 0; }
.enterprise-list ul li a img { max-height: 100%; max-width: 100%; vertical-align: middle; padding: 20px 50px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.enterprise-list ul li a:hover { border-color: #a9c0ff; }
.enterprise-list .country-box { position: relative; overflow: hidden; border-radius: 8px; }
.enterprise-list .country-box.korea { background: url(../../img/flag/south-korea.png) no-repeat; background-size: 100px; background-position: -20px -20px; }
.enterprise-list .country-box.usa { background: url(../../img/flag/united-states.png) no-repeat; background-size: 100px; background-position: -20px -20px; }
.enterprise-list .country-box .flag { position: absolute; z-index: 2; width: 80px; height: 80px; left: -20px; top: -20px; }
.enterprise-list .country-box .flag img { width: 100%; height: 100%; }

/* 분석 */
.analysis-wrap { margin-bottom: 35px; }
.analysis-list ul li { width: calc(50% - 10px); float: left; height: 450px; border-radius: 8px; box-shadow: 0 3px 15px -5px rgba(0,0,0,0.2); margin-bottom: 20px; }
.analysis-list ul li:nth-child(2n) { float: right; }
.analysis-list ul li a { display: flex; display: -ms-flexbox; border-radius: 8px; flex-direction: column; height: 100%; }
.analysis-list ul li a .title-area { background: #91aeff; border-top-left-radius: 8px; border-top-right-radius: 8px; position: relative; padding: 10px 10px 10px 40px; }
.analysis-list ul li a .title-area .ico { width: 15px; height: 15px; position: absolute; left: 13px; top: 10px; }
.analysis-list ul li a .title-area .title { font-size: 1.3rem; font-weight: normal; color: #fff; line-height: 15px; word-break: break-all; }
.analysis-list ul li a .chart-area { background: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; flex: 1; }
.analysis-list ul li a .chart-area .chart-container { height: 100%; width: 100%; max-height: 415px; }
.analysis-list ul li a .chart-area .chart-container figure { padding: 10px 0; margin: 0; max-height: 415px; }
.analysis-list ul li a .chart-area .chart-container figure>div { max-height: 395px; }
.analysis-list ul li a .chart-area .chart-container figure svg { height: 100%!important; }
.analysis-list ul li a .chart-area .chart-container .highcharts-container { height: 100%!important; }
.analysis-list ul li a .chart-area .chart-container .highcharts-title { display: none; }
.analysis-list ul li a .chart-area .chart-container .highcharts-subtitle { display: none; }

/* 토픽 */
.topic-list ul li { width: calc(25% - 15px); float: left; box-shadow: 0 3px 15px -5px rgba(0,0,0,0.2); border-radius: 8px; margin-right: 20px; }
.topic-list ul li:nth-child(4n) { margin-right: 0; }
.topic-list ul li a { height: 100%; display: block; border-radius: 8px; overflow: hidden; }
.topic-list ul li a .img-area { width: 100%; height: 180px; position: relative; overflow: hidden; background: #dee3eb; }
.topic-list ul li a .img-area .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
.topic-list ul li a .img-area .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; min-height:100%; min-width: 100%; transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; }
.topic-list ul li a:hover .img-area .thumbnail img { transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }
.topic-list ul li a .txt-area { background: #fff; padding: 15px; }
.topic-list ul li a .txt-area .topic-title { font-size: 1.4rem; font-weight: 800; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 40px; margin-bottom: 10px; }
#info_container .topic-list ul li a .txt-area .detail { font-size: 1.3rem; line-height: 17px; color: #666A7D; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; max-height: 68px; }

.topic-list .dot-navi { margin-top: 20px; text-align: center; }
.topic-list .dot-navi a { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #747374; }
.topic-list .dot-navi a.select { border: 1px solid #5ba1eb; background: #5ba1eb; }


@media (max-width: 1200px) {
    /* 설명 */
    .subject-content-wrap .description-wrap .txt-area { padding-left: 0; width: calc(100% - 240px); float: right;}
    .subject-content-wrap .description-wrap .txt-area .detail-btn { width:100%; }
    .subject-content-wrap .description-wrap .img-area { width:200px; }
    .subject-content-wrap .description-wrap .img-area img { width:200px; max-width:200px;}
    
    /* 관련기업 */
    .enterprise-list ul li a img { padding:20px;}

    /* 분석 */
    .analysis-list ul li { height:350px; }
}


@media (max-width: 1024px) { 
    /* 서브젝트 */
    .subject-select-wrap ul li a,
    .subject-select-wrap ul li.select a { font-size: 1.6rem; padding-bottom:15px; }

    /* 관련기업 */
    .enterprise-list ul { padding: 10px 20px; }
    .enterprise-list ul li { width: calc(20% - 10px); }
    .enterprise-list ul li a img { padding:10px; }

    /* 분석 */
    .analysis-list ul li { height:300px;}
    .analysis-list ul li a .chart-area .chart-container { max-height: 235px; }

    /* 토픽 */
    .topic-list ul li a .img-area { height: 100px; }
    .topic-list ul li a .txt-area { padding:10px;}
    .topic-list ul li a .txt-area .topic-title { font-size: 1.3rem; }
    #info_container .topic-list ul li a .txt-area .detail { font-size: 1.2rem; }
}

@media (max-width: 900px) {
    /* 서브젝트 */
    .subject-select-wrap ul li a,
    .subject-select-wrap ul li.select a { font-size: 1.5rem; padding-bottom:10px; }
    .subject-select-wrap ul li.select a:after { height:2px; }

    /* 설명 */
    .subject-content-wrap .description-wrap .txt-area { width:100%; padding-top:510px}
    .subject-content-wrap .description-wrap .txt-area h1.name { text-align: center; font-size: 2.2rem; }
    .subject-content-wrap .description-wrap .txt-area .detail { font-size: 1.2rem; }
    .subject-content-wrap .description-wrap .img-area { left:50%; transform:translateX(-50%); position: absolute; width:490px}

    /* 관련기업 */
    .enterprise-list ul { white-space: normal; }
    .enterprise-list ul li { width: calc(33.33% - 10px); margin-right:5px; margin-bottom:10px}

    /* 토픽 */
    .topic-list ul li a .img-area { height:70px; }
    .topic-list ul li a .txt-area .topic-title { line-height: 17px; margin-bottom: 5px; }
    #info_container .topic-list ul li a .txt-area .detail { line-height: 15px}
    .subject-content-wrap .description-wrap .img-area img {width:400px; max-width:none;}
}

@media (max-width: 600px) {
    /* 서브젝트 */
    .subject-content-wrap { padding:25px 20px; }

    /* 분석 */
    .analysis-list ul li a .title-area { padding:10px; }
    .analysis-list ul li a .title-area .title { font-size: 1.2rem; }
    .analysis-list ul li a .title-area .ico { display: none; }
    
    /* 토픽 */
    .topic-list ul li:nth-child(2n) { margin-right: 0; }
    .topic-list ul li { width: calc(50% - 10px); margin-bottom: 20px; }
}

@media(max-width:500px) {
    .subject-content-wrap .description-wrap .img-area {width:100%; padding:0 20px}
    .subject-content-wrap .description-wrap .img-area img {width:100%}
    .subject-content-wrap .description-wrap .txt-area {padding-top:500px}
}

@media(max-width:375px) {
    .subject-content-wrap .description-wrap .txt-area {padding-top:370px}
}

@media(max-width:320px) {
    .subject-content-wrap .description-wrap .txt-area {padding-top:320px}
}