*{
    margin: 0; padding: 0; text-decoration: none; list-style:  none; box-sizing: border-box;
}
body{
    max-width: 720px; margin: 0 auto; font-family:"Noto Sans KR" !important;
}
img{
    max-width: 100%;
}
a:hover {text-decoration:none;}
a:hover .underline {text-decoration:underline};
.bg-pink{
    background-color: #fff7fa !important;
}
.bg-orange{
    background-color: #fffbf7 !important;
}
.bg-blue{
    background-color: #f7ffff !important;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/font/NotoSansKR-Light.otf') format('embedded-opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/font/NotoSansKR-Regular.otf') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/font/NotoSansKR-Medium.otf') format('embedded-opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/font/NotoSansKR-Bold.otf') format('embedded-opentype');
    font-weight: 700;
    font-style: normal;
}
  
/* icon */
[class^=icon-]{display: inline-block;vertical-align: middle;background-repeat: no-repeat;background-position: 50% 50%; background-size: cover;}
.icon-arrow{width: 9px; height: 17px; background-image: url(/image/icon-arrow.svg);}
.icon-w-arrow{width: 10px; height: 17px; background-image: url(/image/icon-w-arrow.png);}
.icon-service-01{width: 44px; height: 44px; background-image: url(/image/icon-service-01.svg);}
.icon-service-02{width: 44px; height: 44px; background-image: url(/image/icon-service-02.svg);}
.icon-service-03{width: 44px; height: 44px; background-image: url(/image/icon-service-03.svg);}
.icon-service-04{width: 44px; height: 44px; background-image: url(/image/icon-service-04.svg);}
.icon-tab-01{width: 100%; height: 102px; background-image: url(/image/btn_top_01_off.svg);}
.icon-tab-02{width: 100%; height: 102px; background-image: url(/image/btn_top_02_off.svg);}
.icon-tab-03{width: 100%; height: 102px; background-image: url(/image/btn_top_03_off.svg);}
.icon-tab-01.on{width: 100%; height: 102px; background-image: url(/image/btn_top_01_on.svg);}
.icon-tab-02.on{width: 100%;; height: 102px; background-image: url(/image/btn_top_02_on.svg);}
.icon-tab-03.on{width: 100%; height: 102px; background-image: url(/image/btn_top_03_on.svg);}
.icon-resources{
    width: 20px; height: 20px; background-image: url(/image/icon-resources.png); margin-right: 5px;
}
.icon-foot-banner{width: 37px; height: 31px; background-image: url(/image/icon-foot-banner.svg); margin-right: 15px;}
.icon-close{width: 23px; height: 23px; background-image: url(/image/icon-close.svg); position: absolute; right: 22px;}
.icon-g-close{width: 23px; height: 23px; background-image: url(/image/icon-g-close.png);}
/* 상승/하락 */
.up{ color: #ff0066 !important;}
.down{ color: #44b4ff !important;}

/* padding, margin */
.pt-15{padding-top: 15px !important;}

/* content start */
.head{
    background-image: linear-gradient(to bottom, #5f70b6, #3c497e); position: relative; z-index: 1;
}
.head ul{
    display: flex; align-items: center;
}
.head .first-nav{
    width: 35px; height: 100%;  background-image: linear-gradient(to bottom, #41518f, #273576);
}
.head li{
    padding: 10px 8px;
}
.head li a{
    font-size: 15px; color: #98a6cd;
}
.head li.active a{
    font-size: 18px; color: #fff;
}
@media screen and (max-width: 361px) {
    .head li a{
        font-size: 13px; color: #98a6cd;
    }
    .head li.active a{
        font-size: 16px; color: #fff;
    }  
}
.content{
    position: relative;
}
/* k가이드 신청 배너 */
.footer-banner{
    width: 100%; height: 55px; position: fixed; display: flex; left: 0; bottom: 0px;
    align-items: center; justify-content: center; background-color: #ff0066;
}
.footer-banner__txt{ font-size: 22px; font-weight: 500; color: #fff;}
/* 서비스, 가입 탭 */
.nav-tabs{
    border-bottom: 0; padding: 0 10px;
}
.nav-tabs .nav-item{
    width: 50%; text-align: center;
}
.nav-tabs .nav-link{
    color: #828282; font-weight: 500;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
    border-color: transparent; border-bottom: 3px solid #ff3d85; color: #333; 
}

.tab-content{
    padding: 25px 20px;
}
.tab-content .desc{
    border: 1px solid #dedede; color: #707070; padding: 15px 0; text-align: center; border-radius: 41px;
}
.tab-content .desc span{
    font-size: 10px; 
}

.service-content{
    padding-top: 10px;
}
.service-content__box{
    display: flex; align-items: center; justify-content: space-between; padding: 25px 9px; border-bottom: 1px solid #dedede;
}
.txt-box{
    width: 60%;
}
.txt-box .txt-box__title{
    font-size: 15px; font-weight: bold;
}
.txt-box .txt-box__title.chap1{color: #ff3d85;}
.txt-box .txt-box__title.chap2{color: #ff983d;}
.txt-box .txt-box__title.chap3{color: #44b4ff;}
.txt-box .txt-box__title.chap4{color: #8d209d;}

.txt-box .txt-box__desc{
    font-size: 13px; color: #545454; margin-top: 10px;
}

/* 가입안내 */
.join-wrap__box{
    border-bottom: 1px solid #dedede; padding: 15px 0;
}
.join-wrap__box:last-child{
    border-bottom: 0;
}
.join-box__title{
    font-size: 18px; font-weight: bold; line-height: 17px;
}
.join-box__desc{
    color: #707070; line-height: 20px; letter-spacing: -0.62px; margin-top: 10px; font-size: 13px;
}
.join-box__desc.essential{
    color: rgba(112, 112, 112, 0.7); line-height: 15px; letter-spacing: -0.58px; margin-top: 10px; font-size: 12px; position: relative; padding-left: 12px;
}
.join-box__desc.essential::before{
    content:"※"; position: absolute; top:-1px; left: 0;
}
.join-wrap__box .table{
    margin-top: 17px; margin-bottom: 25px;
}
.join-wrap__box .table th{
    font-size: 11px; color: #707070; padding: 1rem 0.5rem; text-align: center;background-color: #fff; border-top: 3px solid #707070; border-bottom: 3px solid #707070; border-left: 1px solid #707070;
}
.join-wrap__box .table th:first-child{
    border-left: 1px solid transparent;
}
.join-wrap__box .table td{
    font-size: 11px; color: #707070; padding: 1rem 0.5rem; text-align: center;border-bottom: 1px solid #707070; border-left: 1px solid #707070;
}
.join-wrap__box .table td:first-child{
    border-left: 1px solid transparent;
}

/* 바로가기 단기 */
.btn-top__tab{
    display: flex; align-items: center; justify-content: center;
}
.btn-top__tab li{
    width: 100%;
}
.suggestion-box{
    margin-bottom: 15px;
}
.suggestion-list{
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.suggestion-list li{
    width: 25%; text-align: center;  position: relative;   font-weight: 500; 
}
.suggestion-list a{
    color: #acacac; font-size: 18px;
}
.suggestion-list a::after{
    content: ""; position: absolute; top: 56%; right: 0; width: 1px; height: 50%; background-color: #707070; transform: translateY(-50%);
}
.suggestion-list li:last-child a::after{
    content:none;
}
.table.suggestion{
    font-size: 16px; text-align: center; color: #333; font-weight: 500; border-top: 1px solid transparent;
}
.table.suggestion th{
    padding: 0.3rem 0.625rem; background-color: transparent;
}
.table.suggestion td{
    padding: 0.3rem 0.625rem;
}
.table.suggestion td.up{
    padding: 0.25rem 0.625rem; color: #ff3d85; 
}
.table.suggestion td.down{
    padding: 0.25rem 0.625rem; color: #44b4ff;
}
.badge{
    min-width: 55px; height: 25px; color: #fff; font-size: 12px; font-weight: 500; background-color: #8451c4; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; margin-bottom: 5px; margin-top: 5px;
}
.badge.purple{
    background-color: #d40a94;
}
/* 단기, 스케줄링, 중장기 상세페이지 */
.detail-wrap{
    padding: 19px 20px;
}
.detail-wrap__head{
    display: flex; align-items: center;justify-content: space-between; margin-bottom: 55px;
}
.detail-wrap__box{
    display: flex; justify-content: space-between;
}
.detail-wrap__box .company-market-cap, .detail-wrap__box .company-current-price{
    font-size: 18px; font-weight: 500; line-height: 1.13; color: #828282; 
}
.detail-wrap__box .company-name, .detail-wrap__box .company-price{
    font-size: 27px; color: #545454; font-weight: 500; line-height: 1; margin-top: 12px;
}
.detail-wrap__box .company-num, .detail-wrap__box .company-percent{
    font-size: 18px; font-weight: 500; line-height: 1.13; color: #707070; margin-top: 10px;
}

.detail-content{
    margin-top: 35px; display: flex; align-items: center; justify-content: space-between;
}
.detail-content .detail-content__title{
    font-size: 18px; font-weight: bold; line-height: 1.13; color: #333;
}
.detail-content .detail-content__desc{
    font-size: 18px; font-weight: 500; line-height: 1.13; text-align: left;
    color: #545454; margin-top: 11px;
}
.detail-progress-wrap{
    position: relative; 
}
.detail-progress{
    width: 100%; height: 10px;   background-image: linear-gradient(to right, #44b4ff 2%, #ff3d85 98%); border-radius: 5px; margin-top: 24px; position: relative;
}
.detail-progress .dot{
    position: absolute; width: 20px; height: 20px; border-radius: 50px; border: 3px solid #333; top: 50%; transform: translateY(-50%); background-color: #fff;
}
.stop-loss{position: absolute; left:0; top: 30px;}
.target-loss{ position: absolute;top: 30px;}

.target-loss2{ position: absolute;top: -58px;}

.target-loss.bar::after{
    content:''; position: absolute;width: 1px; height: 13px; background-color: #707070; top: -15px; left:50%; transform: translateX(-50%);
}
.target-loss2.bar::after{
    content:''; position: absolute;width: 1px; height: 13px; background-color: #707070; top: 42px; left:50%; transform: translateX(-50%);
}

.asis-price{
    display: flex; align-items: center; justify-content: space-between; 
}
.asis-price__txt{
    font-size: 15px; font-weight: 500;
}
.asis-price__desc{
    font-size: 17px; font-weight: 500; line-height: 1.13; color: #707070;
}
.judgment-msg{
    font-size: 15px; font-weight: 500; line-height: 1.13; text-align: center;
    color: #545454; margin-top: 65px;
}
.yield{
    padding: 15px 12px; border-radius: 10px; border: solid 1px #707070; background-color: #fff; display: flex; align-items: center; justify-content: space-between; margin-top: 33px;
}
.yield-txt{
    font-size: 15px; font-weight: bold; line-height: 1.13; color: #333;
}
.yield-percent{
    font-size: 20px; font-weight: bold; line-height: 0.85;
}
.detail-wrap .join-box__desc{
    font-size: 18px; color: #707070;  line-height: 1.33;
}
.crossing{
    display:block; margin-top: 70px; border-radius: 5px; padding: 10px 11px 15px 11px; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.16); border: solid 1px #dedede;
}
.crossing.term{background-color: #ff0066;}
.crossing.scheduler{background-color: #ff983d;}
.crossing.long-term{ background-color: #44b4ff;}

.crossing-content__head{
    display: flex; align-items: center; justify-content: space-between;
}
.crossing-content__body{
    display: flex; align-items: center; justify-content: space-between; margin-top: 24px;
}
.crossing-head__txt{
    font-size: 15px; font-weight: 500; line-height: 1.13; color: #fafafa;
}
.crossing-body__txt{
    font-size: 18px; font-weight: 500; line-height: 0.94; color: #fff;
}
.issue-content{
    margin-top: 48px;
}
.issue-content .join-box__desc{
    margin-top: 25px;
}

/* 슈퍼k 시장뷰 */
.super-wrap{
    padding: 10px;
}
.super-wrap__list li{
    margin-bottom: 20px;
}
.super-wrap__list a{
    display: flex; align-items: center;
}
.super-wrap__list .badge{
    margin-right: 15px; margin-bottom: 0;
}
.super-wrap__list .title{
    width: 80%; text-overflow: ellipsis; white-space:nowrap; overflow: hidden;
    font-size: 18px; font-weight: 500; line-height: 1.08; color: #787878;
}
/* 슈퍼k 시장뷰 상세 */
.super-view__wrap{
    padding: 20px 30px;
}
.super-view__content .super-content__title{
    font-size: 21px; font-weight: 500; line-height: 1; color: #707070; margin-top: 20px;
}
.super-content__date{
    font-size: 10px; font-weight: 500; color: #afafaf; margin-top: 12px;
}
.super-content__desc{
    font-size: 14px; font-weight: 500; color: #707070; margin-top: 30px;
}

/* 팝업 css */
.popup{
    width:100%; height: 100%; position: fixed; top: 0; left: 0;
}
.popup::after{
    content: ""; position: absolute; background-color: #000; width: 100%;height: 100vh; top: 0; left: 0; opacity: .2; z-index: -1;
}
.popup-wrap{
   width: 95%;  border-radius: 9px;  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16); background-color: #280a34; margin: 0 auto; padding: 34px 32px; position: absolute; top: 50%; left:50%; transform:translate(-50%, -50%); z-index: 1;
}
.popup-wrap .icon-close{ position: absolute; top:10px; right:10px;}
.popup-wrap__title{
    font-size: 34px; font-weight: bold; text-align: center; color: #ff983d; text-decoration: underline;
}
.popup_wrap__message{
    font-size: 22px; font-weight: bold; color: #dedede; margin-top: 2px; text-align: center; line-height: 1;
}
.popup-result{
    width: 75%; margin: 12px auto 0; border-radius: 9px; border: solid 1px #707070; padding: 10px 0; 
}
.popup-result__txt{
    font-size: 18px; font-weight: 300; line-height: 0.94; text-align: center; color: #dedede;
}
.popup-result__percent{
    font-size: 50px; font-weight: bold; text-align: center; color: #ff3d85; line-height: 1; margin-top: 5px;
}

.popup-time{
    display: flex; align-items: center; justify-content: center; margin-top: 19px;
}
.popup-time .icon-w-arrow{
    margin: 0 34px;
}
.popup-time__txt{
    font-size: 18px; font-weight: 300; line-height: 0.94; text-align: center; color: #dedede;
}
.popup-time__date{
    font-size: 18px; font-weight: bold; line-height: 0.94; text-align: center; color: #fff; margin-top: 8px;
}