@charset "utf-8";
/* Tarasoft 2021-08-12 PIS */

.wbox { color:#fff; position: absolute; left: 50%; transform: translate(-50%);}

/* 공통 */
.title_text {font-size: 2rem;}
.section_con { margin-top:20px; margin-bottom:26px;}

/* 배경 */
.bg_gradient {background: repeating-radial-gradient(circle at center,  #2C2E60 , #000) fixed;}

/* top_menu */
.top_menu{ width:100%; overflow: hidden; margin-bottom:42px;}
.main_tit {display: inline-block;font-size: 3.2rem;}
.mypage_icon_box {float: right;}

.total_count_box { padding: 20px 20px 0 20px;}
.total_count_txt {font-size: 1.4rem; color:#767DFF;}
.total_count { font-size: 2.8rem;}

/* 보유코인 top5 / 코인 전체보기 */
.coin_selet_box {margin-top:28px; margin-bottom:22px; background-color:#0F1122;  border-radius: 30px;}
.coin_menu_check {  display: flex;  justify-content: space-between;align-items: center;padding: 5px;background-color: #0f1122; border-radius: 30px;}

.coin_menu_check li.coin_active {background-color:#6C6AEB; font-weight: bold;  text-align: center;  }

.coin_menu{height:50px;  display: block;  font-size: 1.4rem;  width: 50%; padding: 15px 0;background-color: transparent;
border-radius: 30px; text-align: center; cursor: pointer;}
/* .coin_none { background-color:#0F1122;} */

/* 그래프 */
.graph_box {width:auto; height: 337px; background-color: #21233A; border-radius: 40px; margin:0 auto; overflow: hidden;}

/*top5 메뉴 */
.graph_select {width:100%; min-width: 100px; height: 337px; float: left; top:20px; padding: 0 10%;}
.chart_box {width:100%; height: 59%; position: relative;}
.graph_list {width:100%;height: 41%;padding-top:16px;}
.chart {width: 160px; height: 160px; border-radius: 50%; transition: 0.4s; margin: 0 auto; position: absolute; left:50%;
top:8%; transform: translate(-50%);}

span.center {background: #21233A; display: block; position: absolute; top:50%; left: 50%; width: 144px; height: 144px;
border-radius: 50%; text-align: center; line-height: 2rem; padding-top: 33%; font-size: 20px; transform: translate(-50%,-50%);
color:#fff;
}

/*전체 코인 메뉴 */
.total_coinlist {float: left; width:100%; min-width: 100px;  height:337px; padding:17px 6% 17px 6%;}
/* .total_coinlist > ul > li {text-align: left;} */
.coin_name { width:50%; height:36px; float: left; font-size: 1.2rem; padding-left:10px; text-align: center; font-family: "Poppins", sans-serif; font-weight: 400; }
.top5_color_icon { display: inline-block; width:10px; height: 10px; border-radius: 10px; margin-right: 6px;}
.graph_percent{font-size: 2.2rem; font-weight: 400; }
.graph_txt {font-size: 1.3rem; font-weight: 400;}
/* .in_block {width:40%; display: inline-block;} */

/* 메인 순위 컬러 5가지 와 기타색상 */
.top5_color01 {background-color: #E2711E;}
.top5_color02 {background-color: #EE9E26;}
.top5_color03 {background-color: #5CB390;}
.top5_color04 {background-color: #23ABE7;}
.top5_color05 {background-color: #3359A5;}
.top5_color06 {background-color: #7F7F7F;}

.best_none { display: none;}
/* 코인 전체보기 , 스테이킹 부분 */
@media (min-width: 0) and (max-width: 350px) {
    /* .best_none { display: none;}
    .coin_name{text-align: left;} */
    .in_block {width:50%; display: inline-block;}
}

@media (min-width:351px) {
    .graph_select,.total_coinlist{width:100%;}
    /* .best_none { display: unset;} */
    .staking_con { background-color: #F24141; border-radius: 20px;}
    .in_block {width:44%; display: inline-block;}

}


/* 타라기반 코인 */
.tarabase_list_box { display: inline-block; position: relative;}
/* .tarabase_list_box:nth-child(1) { margin-right:38px;} */
.tarabase_coin {overflow: hidden;}
.tarabase_list_box {width:100%; margin-right:5%; float: left;}


@media (min-width:500px) {
    .tarabase_list_box{width:47.3%;}

}

.tarabase_list_box:nth-child(1){ margin-bottom:20px;}
.tarabase_list_box:nth-child(2){ margin-right:0px;}
.tarabase_list {width:100%; height: 124px; background-color: #282C4A; border-radius: 20px; padding: 22px 20px;}

/* 타라기반 코인 슬라이드 영역 */
/* .tarabase_list {width:260px; height: 124px; background-color: #282C4A; border-radius: 20px; padding: 28px 20px;} */
/* .tarabase_coin {  width:1920px;  height: 124px; overflow: scroll; }
.tarabase_coin02 { height: 124px; overflow: scroll;}
.tarabase_coin02::-webkit-scrollbar { display: none;} */

/* 타라기반 코인 슬라이드 영역 */
/* @media (min-width: 0) and (max-width: 350px) {
    .tarabase_coin{  width:1300px; overflow: scroll;}
}

@media (min-width:351px) {
    .tarabase_coin{ width:1300px; overflow: scroll;}
} */

.tarabase_tit_en {margin-left:8px; color:#CED0DE; font-size: 1.4rem; line-height: 2.6rem; float: left;}
.tarabase_tit_ko {color:#FF8300; font-size: 1.8rem; float: left;}
.tarabase_tara {margin-top:16px; font-size: 1.2rem;  width:100%; float: left;}
.tarabase_dollar { font-size: 1.8rem;  width:100%; float: left;}
.tarabase_icon { position: absolute; top:20px; right: 20px;}

.mycoin_box {width:98%; height: 400px;}
.mycoin_list {width:100%; height: 74px; margin:8px 0;}
.mycoin_con { overflow: hidden; padding: 14px 0;}

/* 2021.09.09 eidt GJ : coin_img와 겹쳐서 li에 따로 스타일 먹임 */
.main_mycoin .mycoin_con > li:first-child {overflow: hidden;}

/* 2021.09.09 edit GJ : mycoin_icon_box 에 position: relative; 추가 */
.mycoin_icon_box { float: left; margin-right: 20px; position: relative;}

.mycoin_name,.mycoin_dollar  { font-size: 1.8rem;}
.mycoin_name {float: left;}
.mycoin_dollar{float: right; text-align: right;}
.mycoin_tara,.variation_num { display: block; font-size: 1.4rem; color:#9395A4;}
.variation_num {text-align: right;}

/*background-color: #F24141; 는 미디어쿼리에서  */
.staking_con {width:100%; height: 140px;}
.staking_img_box { width:auto; max-width:325px; height:140px; margin:0 auto;}
.staking_img { display: block; width:100%;}

.coin_ani {background-color: unset;}

/* 뉴스 */
.news_box { overflow: hidden; width:98%; height: 206px;}
.news_list {width:100%; height: 26px; margin-top:12px; margin-bottom:12px;}

/* 2021.09.09 edit GJ : text-align:center; 삭제, line-height: 2.4rem; -> line-height: 25px; 수정 : li 크기가 25px */
.news_con li {float: left; font-size: 1.4rem; line-height: 25px; }

/* 2021.09.09 edit GJ : text-align:center; 추가 */
.news_category {width:50px; height: 25px; border-radius: 25px; margin-right: 20px; text-align:center; color: #fff;}

/* 2021.09.09 edit GJ : news_txt 스타일 추가 */
.news_txt{width: calc(100% - 110px); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

/* 카테고리별로 색다름 , 공지,이벤트 긴급 */
.news_notice {background-color: #00B552;}
.news_event {background-color: #674BFF;}
.news_emergency {background-color: #FF4B4B;}


/* 2021.09.09 edit GJ : width값, text-align: right; 추가 */
.news_date { float: right!important; color:#9395A4!important; width: 40px; text-align: right;}


/* footer layout로 옮김 : pyo*/
/* footer {width:100%; height: 170px;}
footer p {font-size: 1rem; color:#767DFF; text-align: center; vertical-align: middle;} */



.opacity_1 {/* display: none; */ opacity: 0;transition: all 0.4s;}
.sendcoin_list {transition: all 0.4s;}
.sendcoin_list li {display: inline-block;}

/* 정보가 없을때 null  */
/* 메인코인  */
.tarabase_list_none {display: block; height: 124px; font-size: 1.8rem; width: 100%; height: 124px; margin-right: 0; text-align: center;line-height: 124px;
    /* padding-top:25vh; */ overflow: hidden; }

.mycoin_name_none {display: block;  width: 100% !important;line-height: 400px; /* padding-top:25vh; */ text-align: center; overflow: hidden;}
.news_txt_none { display: block; height:206px ;width: 100% !important;  line-height:150px !important; /* padding-top:25vh; */ text-align: center;
overflow: hidden;}

.doughnut1 { background: conic-gradient( #E27110 0%  40%, #EE9E00 40%  50%,   #5CB390 50%  60%, #23ABE7 60%  65%, #3359A5 65%  80%,  #7F7F7F 80% 100%);}
.doughnut_none  { background: conic-gradient( #282C4A  0%  100%);}

.allBtn_box {line-height: 30px;}
.allBtn {padding-right: 16px; float: right; font-size: 1.4rem; color:#767DFF;}
.allBtn::after { content: url(../images/common/allBtn.svg); }


/* 2021.09.09 edit GJ */
/* 코인 리스트 폰트사이즈 조절 */
@media (min-width: 0) and (max-width: 365px) {
    .mycoin_name, .mycoin_dollar {
        font-size: 1.5rem;
    }
  }