@charset "utf-8";

/*-------------------------------------------------------------------
@ TEMPLATE UI : 2024.04.01 J.G.H
-------------------------------------------------------------------*/

#container.insight {width: 100%;}
#container.insight .content-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:1488px;
  margin:0 auto 56px;
}
#container.insight .content-header .content-tit{
    margin:0;
    flex:1;
    line-height:1.2;
}
#container.insight .content-header .search-input{
  margin:0;
  flex:none;
}
#container.insight .content-tit {width: 1488px; margin: 0 auto 5.6rem;}
.list-pick {max-width: 100% !important; margin: 0 auto;}
.list-pick a {cursor:pointer}
.list-pick figure.square{
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    overflow:hidden;
    background-color:#EDEFF3;
    margin-bottom:20px;
}
.list-pick figure.square img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    object-position:center;
}
.list-pick .flex {
display: flex;
align-items: center;
float: none;
width: 100%; 
margin: 0 auto;
padding: 0 !important;
}
/* .list-pick .flex .tabs {display: flex;} */
.list-pick .search-input {margin: 0 0 0 auto;}
/* .list-pick .tab {
display: flex;
align-items: center;
min-width: 3rem;
width: auto;
height: 5rem;
margin-right: 1rem;
padding: 0 3rem;
box-sizing: content-box;
background-color: #1C3E70;
border-radius: 2.5rem;
color: #fff;
text-transform: none;
} */
/* .list-pick .tab.on {background-color: #DF6D1B;} */
/* .list-pick .tab span {
padding-left: 2.5rem;
background-repeat: no-repeat;
background-position: 0 center;
font-weight: 500;
} */
/* .list-pick .tab:nth-child(1) span {padding: 0;}
.list-pick .tab:nth-child(2) span {background-image: url('/magi/assets/images/common/ico_pick_video.png');}
.list-pick .tab:nth-child(3) span {background-image: url('/magi/assets/images/common/ico_pick_shorts.png');}
.list-pick .tab:nth-child(4) span {background-image: url('/magi/assets/images/common/ico_pick_paper.png');}
.list-pick .tab:nth-child(5) span {background-image: url('/magi/assets/images/common/ico_pick_instagram.png');}
.list-pick .tab:nth-child(6) span {background-image: url('/magi/assets/images/common/ico_pick_news.png');} */

.list-pick .grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 60px auto 0; justify-content: flex-start;gap:40px 24px;max-width:1488px;}
.list-pick .grid.news-grid{
    gap:24px;
}
.list-pick .grid-item {float: left; width: 100%;}
.list-pick .grid-item > a {display: flex;flex-direction: column;height:100%;}
.list-pick .grid-item.option1 > a {height: 320px;} /* pick영상 */
.list-pick .grid-item.option2 > a {height: 720px;} /* shorts 영상 */
.list-pick .grid-item.option3 > a {height: 464px;} /* pick리포트 */
.list-pick .grid-item.option4 > a {height: 458px;} /* instagram */
.list-pick .grid-item.option5 > a {height: 340px;} /* 미래에셋in 뉴스 */

.list-pick .grid-item img {width: 100%; border-radius: 24px; margin-bottom: 20px;}
.list-pick .grid  [class*="option"] {display: none;}
.list-pick.all .grid [class*="option"] {display: block;}
.list-pick[class*="option"] .grid {display: flex; overflow: hidden; height: auto !important;}
.list-pick[class*="option"] .grid .grid-item {float: left;}
.list-pick.option1 .grid .option1,
.list-pick.option2 .grid .option2,
.list-pick.option3 .grid .option3,
.list-pick.option4 .grid .option4,
.list-pick.option5 .grid .option5 {display: block; position: static !important;}
/*.list-pick .grid .option1 img {max-height: 185px;}*/
/*.list-pick .grid .option2 img {max-height: 720px;}*/
/*.list-pick .grid .option3 img {max-height: 330px;}*/
/*.list-pick .grid .option4 img {max-height: 185px;}*/
.list-pick .grid .grid-item .name {
color: #000;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
font-weight:500;
letter-spacing: -0.6px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
    /* height:45px; */
word-break:keep-all;
overflow-wrap:anywhere;
}
.list-pick .grid .grid-item .tiger {
/*display: inline;*/
padding-right: 30px;
background: url('/magi/assets/images/common/bullt_tiger_12x12.png') no-repeat right 8px;
/* word-break: break-all; */
}
.list-pick .grid .grid-item .area {display: flex; align-items: center; padding-top: 10px;margin-top:auto;}
.list-pick .grid .grid-item .area .names,
.list-pick .grid .grid-item .area .data {
margin-right: 6px;
color: #949494;
font-weight: 500;
font-size: 14px;
line-height: normal;
letter-spacing: 0;
}
.list-pick .grid .grid-item .area .names{
    color:#F58220;
}
.list-pick .grid .grid-item .area .btn {
width: 34px;
height: 34px;
margin-left: auto;
background: url('/magi/assets/images/icon/bookmark_content_default.svg') no-repeat center center;
font-size: 0;
text-indent: -9999em;
line-height: 0;
}
.list-pick .grid .grid-item .area .btn.on {background: url('/magi/assets/images/icon/bookmark_content_active.svg') no-repeat center center;}
.list-pick .grid .grid-item .news {
display: flex !important;
flex-direction: column;
gap:40px;
position: relative;
height: 100%;
/* padding: 40px 20px 20px 40px; */
padding: 40px;
background: #fff;
border-radius: 24px;
border:1px solid #C9C9C9;
border-radius:5px;
}
/* .list-pick .news::after {
content: '';
display: block;
clear: both;
position: absolute;
bottom: 30px; right: 30px;
width: 22px;
height: 22px;
background: url('/magi/assets/images/common/ico_link_22x22.png') no-repeat center center;
font-size: 0;
text-indent: -9999em;
line-height: 0;
} */
.list-pick .news > * {width: 100%;}
.list-pick .news .date {
margin-top:auto;
border-top:1px solid #E0E0E0;
padding-top:30px;
font-size:20px;
color:#949494;
letter-spacing:normal;
font-weight:500;
line-height:22px;
}
.list-pick .news .area-header{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.list-pick .news .area-header .bookmark{
    width:34px;
    height:34px;
    background:url('/magi/assets/images/icon/bookmark_content_default.svg') no-repeat center center;
    font-size:0;
    text-indent:-9999em;
    line-height:0;
    transform:translateX(20px);
}
.list-pick .news .area-header .bookmark.on{
    background:url('/magi/assets/images/icon/bookmark_content_active.svg') no-repeat center center;
}
.list-pick .news:hover .area-header .bookmark,
.list-pick .news:hover .area-header .bookmark.on{
    background:url('/magi/assets/images/icon/bookmark_content_default_white.svg') no-repeat center center;
}

.list-pick .news .subtit {
/* margin-top: 56px; */
color: #F58220;
font-weight: 700;
font-size: 20px;
line-height: 42px;
letter-spacing: normal;
}
.list-pick .news .subtxt {
width: auto;
/* height: 108px; */
color: #000;
font-size: 24px;
line-height: 1.4;
font-weight:500;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
letter-spacing: normal;
}
.list-pick .grid .grid-item .news:hover{
    background:#F58220;
    border-color:#F58220;
}
.list-pick .grid .grid-item .news:hover *{
    color:#fff !important;
}
.list-pick .grid-item.no_data {
display: block !important;
position: static !important;
width: 1488px;
margin: 0 auto 0;
text-align: center;
}
.list-pick .grid-item.no_data p {
padding: 82px 0 85px;
border-radius: 24px;
border: 1px solid #D2D7E1;
font-size: 24px;
line-height: 34px;
}
.list-pick .grid-item.no_data .ui_btn-list {margin-top: 60px;}

/* PICK 인사이트 상세 : PICK 영상 */
#container [class*="view-video"] {
position: relative;
width: 100%;
max-width: 1488px;
margin: 0 auto;
}
#container [class*="view-video"] .view-tit{border-top:1px solid #1C3E70;border-bottom:1px solid #E0E0E0;padding-block:23px;display:flex;gap:60px;justify-content:space-between;align-items:center;}
#container [class*="view-video"] .view-tit .title{font-size:30px;line-height:1.6;font-weight:700;color:#000;flex:1;}
#container [class*="view-video"] .view-tit .title-actions{flex:none;position:relative;display:flex;align-items:center;gap:10px;}
#container [class*="view-video"] .view-tit .data{flex:none;font-size:20px;font-weight:500;color:#949494;}
#container [class*="view-video"] .view-tit .view-social{flex:none;position:relative;}
#container [class*="view-video"] .content-stit{margin-top:120px;font-size:30px;font-weight:700;color:#1c3e70;}
.editor {padding-top: 80px;}
.editor .title {margin-top: 50px; font-weight: 700; font-size: 30px; line-height: 1.6;color:#000;}
.editor .conts{font-size:18px;line-height:1.4;color:#000;}
.editor .data {
display: block;
position: absolute;
top: 0.5rem; right: 12rem;
color: #6F7685;
font-weight: 500;
font-size: 18px;
text-align: right;
line-height: 2.4rem;
letter-spacing: 0;
}
.editor .image {text-align: center;}
.editor img {display: flex; object-fit: cover; margin: 59px auto 0;}
.editor * {font-size: inherit; font-family: inherit; vertical-align: top;}
.editor p {margin-top: 30px; font-size: 18px; line-height: 32px;}
.editor .text-f24 {font-size: 24px; line-height: 3.6rem;}
.editor .text-annex {font-size: 14px; line-height: 20px; letter-spacing: 0;}
.editor .stit {margin-top: 8.9rem; text-align: center;}
.editor .smtit {
margin-top: 8.5rem;
font-weight: 500;
font-size: 26px;
line-height: 32px;
}
.editor .title + p {margin-top: 60px;}
.editor .stit + p {margin-top: 57px;}
.editor p + .image {margin-top: 59px;}
.editor .image + p {margin-top: 60px;}
.editor .image + .text-annex {margin-top: 29px;}
.editor .stit span {
position: relative;
display: block;
padding: 5rem 0 5.1rem;
font-weight: 500;
font-size: 4.2rem;
line-height: 6rem;
}
.editor .stit span::before,
.editor .stit span::after {
content: '';
display: block;
clear: both;
position: absolute;
left: 50%;
width: 2.6rem;
height: 2.4rem;
}
.editor .stit span::before {
top: 0;
background: url('/magi/assets/images/pick/bullt_quotation_btm.png') no-repeat center center;
}
.editor .stit span::after {
bottom: 0;
background: url('/magi/assets/images/pick/bullt_quotation_top.png') no-repeat center center;
}
.editor .text-law {margin-top: 11.9rem; padding-top: 8.9rem; border-top: 1px solid #D2D7E1;}
.editor .text-law p {margin: 0; font-size: 14px; line-height: 2.6rem; letter-spacing: 0;}
.insight .relation-theme {display: flex; margin-top: 3rem;gap:24px;}
.insight .relation-theme > a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 210px;
height:210px;
font-weight: 700;
font-size: 24px;
text-align: center;
line-height: 34px;
border-radius:12px;
background-color:#FAFAFA;
gap:10px;
font-size:14px;
color:#193D71;
font-weight:700;
line-height:normal;
transition:background-color 0.3s ease;
}
.insight .relation-theme > a:hover{
    background-color:#ECF1F9;
}
.insight .relation-theme .imgs {
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 75px;
margin: 0 auto 27px;
line-height: 0;
}
.insight .relation-theme .imgs i {width: 100%; max-width: 84px; height: 100%; max-height: 84px; background-position: center 0; background-size: 100% 336px;}

.theme-banner {width: 1488px; margin: 15rem auto 0;}
.theme-banner a{display:block;}
.theme-banner img {width: 100%;}
.view-video .ui_flex-right {margin-top: 6rem;margin-inline:0;max-width:1490px;}
.view-video .comm_thum,
.view-video .comm_items {position: relative;}
.view-video .comm_items {margin-top: 3rem;}
.view-video .comm_thum li > a{font-size:20px;font-weight:500;color:#000;line-height:1.4;letter-spacing:-0.6px;}
.view-video .comm_thum li > a img {width: 100%; border-radius: 24px; height: 185px;display:block;}
.view-video .comm_thum.report li > a img {height: 330px;}
iframe#_pick_player {border: 0; border-radius: 24px;}
.insight .comm_thum .swiper-container {width: 1488px;}
.insight .comm_thum > li {padding-right: 20px;}

.video-caption{margin-top:120px;border-top: 1px solid #1C3E70;
    border-bottom: 1px solid #E0E0E0;}
.video-caption.short{margin-top:0;}
.video-caption .conts{
    display:none;
    padding:30px;
    background:#fafafa;
    border-top:1px solid #e0e0e0;color:#2B2F36;
}
.video-caption .tit-wrap{
    
    font-size:24px;
    padding:0 30px;
    width:100%;
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    color:#000;
    position:relative;
    font-weight:500;
}
.video-caption .tit-wrap .tit{display:flex;align-items:center;gap:10px;}
.video-caption .tit-wrap .tooltip-layer .btn-click{
    width: 16px;
    height: 16px;
    margin-left:0;
}
.video-caption .tit-wrap .tooltip-layer .layer{top:36px;}
.video-caption .tit-wrap::after{
    content: '';
    display: block;
    clear: both;
    position: absolute;
    font-size: 0;
    line-height: 0;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url(../../assets/images/icon/icon_insight_plus.svg) no-repeat center center / 120%;
}
/* .video-caption.on .tit-wrap{
    color:#E27625;
    background-color:#fff;
    border-radius:12px 12px 0 0;
} */
/* .video-caption.on .tit-wrap .tit::after{
    content:'';
    position:absolute;
    bottom:0;
    left: 40px;
    width: 1333px;
    height:1px;
    background:#EDEFF3;
} */
.video-caption.on .conts{
    display:block;
}
#short-pop .conts{
    width:fit-content;
    overflow:visible;
    z-index:11;
}
#short-pop .conts iframe{
    box-shadow:0 40px 30px rgb(112 137 173 / 20%) !important;
}
.video-caption.on > .tit-wrap::after{
    background: url(../../assets/images/icon/icon_insight_minus.svg) no-repeat center center / 120%;
}
.video-caption + .modal-popup .layer-popup .conts .title{
    margin-top:0;
    font-size:20px;
    line-height:40px;
    font-weight:500;
}
.modal-popup .layer-popup .conts .list-bullet{
    margin-top:20px;
}
.btn-flex{
    display:flex;
    justify-content: center;
    align-items: flex-start;
    max-height:calc(100vh - 100px);
    max-width: 500px;
    margin: 90px 0 0 8px;
    gap: 23rem;
}
.btn-flex .pick-view-move{
    margin:0;
}
.btn-flex .pick-view-caption{
    font-size:16px;
    color:#1C3E70;
}
.btn-flex .tooltip-layer{
    position:absolute;
}
.btn-flex .tooltip-layer .btn-click{
    margin: 6px 0 0 12px;
}
.pick-view-caption .video-caption i{
    background:url(../../../magi/assets/images/common/ico_cap.png) no-repeat center center;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 7px 5px 0;
}
.pick-view-caption .tooltip-layer .layer{
    padding: 30px 20px 20px;
}
.flex-wrapper{
    display:flex;
    align-items: flex-start;
}
.pop-content.short-caption{
    display:none;
    margin-top:100px;
    border-radius: 0 36px 36px 0;
    max-width:100%;
}
.pop-content.short-caption.on{
    display:block;
    z-index: 10;
    min-height:initial;
}
.pop-content.short-caption.on::before{
    content: '';
    position: absolute;
    width: 50px;
    height: 100%;
    background: #fff;
    top: 0;
    left: -50px;
}
.pop-content .cap-content{
    padding: 40px 0;
    overflow-y:auto;
}
.pop-content.short-caption .popupcls{
    position: absolute;
    top: 0.8rem;
    right: 0;
    width: 2rem;
    height: 2rem;
    background: url(/magi/assets/images/common/btn_close_48x48.png) no-repeat center center / 100%;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
}

#container.insight .products { display: flex; margin-inline: -24px; padding-inline: 24px; padding-bottom:20px;align-items:stretch;}
#container.insight .products > .each{height:auto;}
#container.insight .products > .each > a {  padding: 50px 30px; flex:none; border: 1px solid #c9c9c9; display:flex; flex-direction: column;height:100%; }
#container.insight .products > .each > a:hover,
#container.insight .products > .each > a:active{
    border-color:#F58220;
    box-shadow:inset 0 0 1px 1px #F58220;
}
#container.insight .products > .each .header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom:20px;}
#container.insight .products > .each .bookmark{
    width:18px;
    height:24px;
    font-size:0;
    text-indent:-9999em;
    line-height:0;
}
#container.insight .products > .each .bookmark::before{
    content: '';
    display: block;
    clear: both;
    position: absolute;
    inset:0;
    font-size: 0;
    background:url('/magi/assets/images/icon/bookmark_default.svg') no-repeat center center / 100%;
}
#container.insight .products > .each .bookmark.actived::before{
    content: '';
    display: block;
    clear: both;
    position: absolute;
    inset:0;
    font-size: 0;
    background:url('/magi/assets/images/icon/bookmark_active.svg') no-repeat center center / 100%;
}
#container.insight .products > .each .chart{margin-top:auto;margin-bottom:24px;}
#container.insight .products > .each .chart canvas{max-width:100%;}
#container.insight .products > .each .info .rate{margin-top:0;}
#container.insight .products .rank { color: #000; font-weight: 700; font-size: 24px; line-height: 1.4; }
#container.insight .products .title { color: #043b72; font-weight: 700; font-size: 32px; line-height: 1.4; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; letter-spacing: -0.44px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; letter-spacing: -2px; }
#container.insight .products .code { color: #043b72; font-size: 14px; line-height: 22px;margin-top:2px;margin-bottom:12px; }
#container.insight .products .type { display: flex; flex-wrap: wrap; align-items: flex-start; }
#container.insight .products .type span { position: relative; color: #949494; font-size: 14px; line-height: 26px; font-weight:500; text-indent: -2px; flex:none; }
#container.insight .products .type span:not(:first-child){margin-left: 10px; padding-left:10px;}
#container.insight .products .type span:not(:first-child)::before { position: absolute; top: 50%; left: 0; height: 12px; margin-top: -6px; background-color:  #c9c9c9; content: ''; width:1px; }
#container.insight .products .graph { margin: auto 0 26px; }
#container.insight .products .graph svg { width: 100% !important; aspect-ratio: 248/58; }
#container.insight .products .graph svg .wj-series-group{ width: 100% !important; aspect-ratio: 248/58; }
#container.insight .calculation .this-label { color: #757575; font-size: 12px; line-height: 1.66667; }
#container.insight .calculation .val.increased span { color: #d93b3b; }
#container.insight .calculation .val.decreased span { color: #245dab; }
#container.insight .calculation .val{vertical-align:baseline;display:flex; align-items: baseline;}
#container.insight .calculation .val .number { font-weight: 500; font-size: 38px; line-height: 1.4; letter-spacing: -0.76px; }
#container.insight .calculation .val .unit { font-weight: 700; font-size: 22px; line-height: 28px; }
#container.insight .prices { display: flex; margin-top: 16px; }
#container.insight .prices em{font-size:13px;color:#757575;}
#container.insight .prices > div { flex: 0 0 50%; }
#container.insight .prices .this-label { display: block; color: #757575; font-size: 13px; line-height: 20px; }
#container.insight .prices .val { color: #1a1a1a; font-size: 14px; line-height: 22px; font-weight:500; }
#container.insight .bookmark { position: relative; width: 16px; height: 22px; }
#container.insight .bookmark::before { position: absolute; top: 0; left: 0; width: 16px; height: 22px; background: url('../../mobile/images/icon/bookmark_default.svg') no-repeat center; background-size: 100% auto; content: ''; }
#container.insight .bookmark.active::before { background-image: url('../../mobile/images/icon/bookmark_active.svg') }
#container.insight .bookmark .val { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; }