@charset "utf-8";

/* main ********************************************************************/


/*메인_공통*/
main{}
main > section{width: 1920px; margin: 0 auto;}

@media all and (max-width: 1920px) {
main > section{margin: 0; width: auto;}
}

@media all and (max-width: 1520px) {
}




/* main_visual*/
#main_visual_section{ padding: 60px 10% 90px 10%;}

.main_visual{ position:relative; display: flex; flex-wrap: wrap; justify-content: center; text-align:center;  background:#68b3fb url("/images/visual_bg2.png") right top no-repeat;  z-index: 50;}
.main_visual *{ box-sizing: border-box;}

.main_visual p{ width: 100%; font-size: 36px; font-weight: 700; color: white; margin-bottom: 30px; word-break: keep-all;}


.main_visual .data_guide{position: absolute; bottom: -65px;  margin: 0 10%;  width: 80%; background: #2073eb; border-radius: 20px;}
.main_visual .data_guide ul{display: flex; height: 130px; overflow: hidden;}
.main_visual .data_guide ul li{flex: 1; color: white; padding: 25px; border-left:1px solid rgba(255,255,255,0.2);}
.main_visual .data_guide ul li > span{display: block;  text-align: left; font-size:16px; color: #dbec20; }
.main_visual .data_guide ul li strong{display: block; font-size:40px; }
.main_visual .data_guide ul li strong span{font-size:30px; padding-left: 5px;}



@media all and (max-width: 1520px) {
	#main_visual_section{ padding: 70px 5% 90px 5%;}	
	.main_visual .data_guide{margin: 0 5%;  width: 90%; }

}


@media all and (max-width: 1280px) {
	#main_visual_section{ padding: 50px 3% 70px 3%;}
	.main_visual{background-image: none;}
	.main_visual p{font-size: 32px; }
	
	.main_visual .data_guide{margin: 0 3%;  width: 94%; }
	.main_visual .data_guide ul li strong{font-size:36px; }
	.main_visual .data_guide ul li strong span{font-size:28px;}
}


@media all and (max-width: 1024px) {
	#main_visual_section{ padding: 50px 3% 60px 3%;}
	.main_visual p{font-size: 28px; }
	
	.main_visual .data_guide{bottom: -50px;  }
	.main_visual .data_guide ul{height: 100px; }
	.main_visual .data_guide ul li{padding: 15px; }
	.main_visual .data_guide ul li strong{font-size:28px; letter-spacing: -0.9px; }
	.main_visual .data_guide ul li strong span{font-size:20px;}
}

@media all and (max-width: 767px) {
	#main_visual_section{ padding: 40px 5% 90px 5%;}
	
	.main_visual .data_guide{margin: 0 5%;  width: 90%; bottom: -90px;  }
	.main_visual .data_guide ul{height:auto;flex-wrap: wrap;}
	.main_visual .data_guide ul li{flex:none; width: 50%;border-top:1px solid rgba(255,255,255,0.2);}
	.main_visual .data_guide ul li:first-of-type{border-top:none; border-left: none;}
	.main_visual .data_guide ul li:nth-of-type(2){border-top:none; }
	.main_visual .data_guide ul li:nth-of-type(3){border-left: none;}
	.main_visual .data_guide ul li > span{font-size:14px; }
	.main_visual .data_guide ul li strong{font-size:26px; }
	.main_visual .data_guide ul li strong span{font-size:16px;}
	
}


@media all and (max-width: 620px) {
	#main_visual_section{ padding: 30px 5% 90px 5%;}
	
	.main_visual p{font-size: 18px; margin-bottom: 20px; }
	
}







/*메인_공지사항*/
#main_notice_section{display: flex; justify-content: space-between; background: #f5f5f5; padding: 120px 10% 60px 10%;}
#main_notice_section > div{position: relative; }
#main_notice_section > div h3 {position: relative; font-size: 30px; padding-bottom: 20px;}
#main_notice_section > div .more_view {display: inline-block; width: 34px; height: 34px; background: #000 url("/images/main_more.png") center no-repeat;overflow: hidden; text-indent: -500px; border-radius: 50%;}



#main_notice_section .notice_area{ width: 31%;border-radius: 30px; padding: 30px; background: #fff;}
#main_notice_section .notice_area h3{border-bottom: 1px solid #ddd; margin-bottom: 35px;}
#main_notice_section .notice_area .btn_guide{position: absolute; display: inline-block;  height: 34px; top: 30px; right: 30px; z-index: 11;}
#main_notice_section .notice_area .btn_guide button{ display: inline-block; vertical-align: top; width: 34px; height: 34px; border:1px solid #ddd; border-radius: 50%;  background-position: center; background-repeat: no-repeat; background-color: #fff; overflow: hidden; text-indent: -500px; }
#main_notice_section .notice_area .btn_guide .btn_up{ background-image: url("/images/btn_up01.png");}
#main_notice_section .notice_area .btn_guide .btn_down{background-image: url("/images/btn_down01.png");}
#main_notice_section .notice_area .notice_list{display: flex; flex-direction: column;}
#main_notice_section .notice_area .notice_list .notice_box{margin-top: 15px;overflow: hidden; width: 100%;}
#main_notice_section .notice_area .notice_list .notice_box:first-of-type{margin-top: 0;}
#main_notice_section .notice_area .notice_list .notice_box a{display: block; }
#main_notice_section .notice_area .notice_list .notice_box a i{font-size: 14px; color: #666;display: block; margin-bottom: 3px;}
#main_notice_section .notice_area .notice_list .notice_box a strong{font-size: 18px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 25px;display: block; font-weight: 400;transition: all 0.2s;}
#main_notice_section .notice_area .notice_list .notice_box a:hover strong{text-decoration: underline;font-weight: 600;}
#main_notice_section .notice_area .slick-slide{height: 50px;}

#main_notice_section .board_area{width: 67%; margin-left: -10px;}
#main_notice_section .board_area h3{margin: 0px 10px; padding-top: 30px; }
#main_notice_section .board_area .btn_guide{position: absolute; display: inline-block;  height: 34px; top: 30px; right: 10px; z-index: 11;}
#main_notice_section .board_area .btn_guide a{display: inline-block; vertical-align: top; width: 34px; height: 34px; border:1px solid #ddd; border-radius: 50%;  background-position: center; background-repeat: no-repeat; background-color: #fff; overflow: hidden; text-indent: -500px;}
#main_notice_section .board_area .btn_guide .prev{background-image: url("/images/btn_prev01.png");}
#main_notice_section .board_area .btn_guide .next{background-image: url("/images/btn_next01.png");}
#main_notice_section .board_area .board_list{display: flex; }
#main_notice_section .board_area .board_box{ margin:0 10px; width: auto; background: #fff; border:1px solid #ddd; border-radius: 20px; overflow: hidden;}
#main_notice_section .board_area .board_box a {display: flex; flex-direction: column; }
#main_notice_section .board_area .board_box a > *{width: 100%; display: block;}
#main_notice_section .board_area .board_box a span{border-radius: 10px; overflow: hidden; height: 200px;}
#main_notice_section .board_area .board_box a img {width: 100%; min-height: 100%; transition: all 0.2s;}
#main_notice_section .board_area .board_box a:hover img{transform:scale(1.2, 1.2);}
#main_notice_section .board_area .board_box a strong{ display: block; margin:20px 5%; width: 90%; font-size: 18px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400;transition: all 0.2s;}
#main_notice_section .board_area .board_box a:hover strong{text-decoration: underline;font-weight: 600;}

@media all and (max-width:1520px){
	#main_notice_section{ padding: 120px 5% 60px 5%;}
}

@media all and (max-width:1280px){
	#main_notice_section{ padding: 120px 3% 60px 3%;}
}


@media all and (max-width:1024px){
	#main_notice_section{ padding: 90px 3% 50px 3%;}
	#main_notice_section > div h3 {font-size: 30px; }
	#main_notice_section .notice_area{width: 48%;}
	#main_notice_section .board_area{width: 48%;margin-left: 0px;}
	#main_notice_section .board_area h3{margin: 0px; }
	#main_notice_section .board_area .board_box{ margin:0; }
}

@media all and (max-width:767px){
	#main_notice_section{ padding: 130px 5% 40px 5%;flex-direction: column;}
	#main_notice_section > div h3 {font-size: 26px; }
	#main_notice_section .notice_area{width: 100%; order: 1; margin-bottom: 20px; }
	#main_notice_section .board_area{width: 100%; order: 2;}
	#main_notice_section .board_area h3{padding-top: 10px;padding-left: 10px;}
	#main_notice_section .board_area .btn_guide{top: 10px; }
	
 

}







/*메인_현황 공통적용 */
.main_stats{padding: 60px 10% 0 10%; }
.main_stats h3{position: relative; font-size: 30px; margin-bottom: 20px;}
.main_stats h3 > a{position: absolute; display: none; vertical-align: top; width: 40px; height: 40px; border:1px solid #ddd; border-radius: 50%;  background-position: center; background-repeat: no-repeat; background-color: #fff; overflow: hidden; text-indent: -500px;}
.main_stats h3 > a.prev{background-image: url("/images/btn_prev01.png"); left: 0;}
.main_stats h3 > a.next{background-image: url("/images/btn_next01.png"); right: 0;}
.main_stats .assets_list{ width: calc(100% + 20px); margin-left: -10px;}
.main_stats .assets_list .assets_box{ margin:0 10px; border:1px solid #eee; background: #f8f8f8; padding: 35px; border-radius: 20px; text-align: center;}
.main_stats .assets_list .assets_box h4,
.main_stats .assets_list .assets_box h4{position: relative; font-size: 20px; margin-bottom:20px; letter-spacing: -0.03em; word-break: keep-all;}
.main_stats .assets_list .assets_box h4:before,
.main_stats .assets_list .assets_box h4:before{position: relative; content: ''; display: inline-block; vertical-align: middle;width: 25px; height: 25px; border-radius: 50%; margin-right: 5px; margin-top: -3px;background-color: #16278e; background-position: center; background-repeat: no-repeat; background-size: 18px;}

.main_stats .assets_list .assets_box ul{display: flex; justify-content: space-between; flex-wrap: wrap; border-top:1px solid #eee;padding: 10px 0; height: 46px;}
.main_stats .assets_list .assets_box ul:first-of-type{border-top:none;}
.main_stats .assets_list .assets_box ul li{line-height: 25px;}
.main_stats .assets_list .assets_box ul li img{max-width: 20px; max-height: 20px; border-radius: 50%; display: inline-block;}
.main_stats .assets_list .assets_box ul li.name{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.main_stats .assets_list .assets_box ul li.name a > span{ color: #777;}

.main_stats .assets_list .assets_box > p{ margin-top: 10px;}
.main_stats .assets_list .assets_box > p a{ display: inline-block; border-radius: 30px; background: #eee; padding: 5px 30px; font-size: 14px;}
.main_stats .assets_list .assets_box > p a:hover,
.main_stats .assets_list .assets_box > p a:focus{background: #16278e; color: #fff;}

@media all and (max-width :1520px) {
	.main_stats{padding: 60px 5% 0 5%; }
}

@media all and (max-width :1280px) {
	.main_stats{padding: 60px 3% 0 3%; }
	.main_stats h3{text-align: center;}
	.main_stats h3 > a{display: inline-block; }
}

@media all and (max-width :1024px) {
	.main_stats{padding: 50px 3% 0 3%; }
	.main_stats h3{font-size: 30px;}
}

@media all and (max-width :767px) {
	.main_stats{padding: 40px 5% 0 5%; }
	.main_stats h3{font-size: 26px;}
	.main_stats h3 > a{width: 34px; height: 34px;}
	.main_stats .assets_list .assets_box{ padding: 30px 25px; }

}



/*메인_현황 점수변화 가상자산 */
#main_score_assets_section{}
#main_score_assets_section .hit_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_mouse_black.svg");}		/*조회수가 많은 가상자산*/
#main_score_assets_section .rising_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_graph-up-arrow_black.svg");}		/*평가점수가 급등한 가상자산*/
#main_score_assets_section .falling_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_graph-down-arrow_black.svg");}		/*평가점수가 급락한 가상자산*/


#main_score_assets_section .assets_box ul li i{font-size: 12px; display: inline-block; width: 52px;}
#main_score_assets_section .assets_box ul li em{display: inline-block; width: 50px;}
#main_score_assets_section .assets_box ul li:nth-of-type(1){ width: 20px;text-align: left;  }
#main_score_assets_section .assets_box ul li:nth-of-type(2){ width: calc((100% - 20px) / 2); text-align: left;}
#main_score_assets_section .assets_box ul li:nth-of-type(3){width: calc((100% - 20px) / 2); text-align: right;}



@media all and (max-width :1024px) {
#main_score_assets_section .assets_box ul li i{width: 50px;}
}





/*메인_현황 신규/이슈 가상자산 */
#main_new_assets_section{}
#main_new_assets_section .promising_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_sunrise_black.svg");}						/*유망한 가상자산*/
#main_new_assets_section .recently_added_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_add_item_black.svg");}				/*최근 신규 거래지원 가상자산*/
#main_new_assets_section .cautionary_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_exclamation-triangle_black.svg");}		/*최근 유의종목 지정 가상자산*/

#main_new_assets_section .assets_box ul li:nth-of-type(1){ width: 85px;text-align: center;}
#main_new_assets_section .assets_box ul li:nth-of-type(2){ width:calc(75% - 115px);text-align: left; }
#main_new_assets_section .assets_box ul li:nth-of-type(3){width: 30px;text-align: center;}
#main_new_assets_section .assets_box ul li:nth-of-type(4){width: 25%;text-align: right;}

#main_new_assets_section .promising_assets ul li:nth-of-type(2){ width:calc(73% - 95px);text-align: left; }
#main_new_assets_section .promising_assets ul li:nth-of-type(3){width: 27%;text-align: right;}




/*메인_현황 시장동향*/
#main_trends_section{}
#main_trends_section .trading_volume_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_category_black.svg");}		/*가장많이 상장된 카테고리*/
#main_trends_section .transaction_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_bank_black.svg");}				/*거래소별 거래지원 순위*/
#main_trends_section .average_assets h4:before{ background-color: #f8f8f8; background-image: url("/images/icon_bank_black.svg");}					/*거래소별 평균점수 순위*/

#main_trends_section .trading_volume_assets ul li:nth-of-type(1){width: 15%; text-align: left;}
#main_trends_section .trading_volume_assets ul li:nth-of-type(2){width: 25%; text-align: left; }
#main_trends_section .trading_volume_assets ul li:nth-of-type(3){width: 40%; text-align: right;}
#main_trends_section .trading_volume_assets ul li:nth-of-type(4){width: 20%; text-align: right;}
#main_trends_section .trading_volume_assets ul li em{ display: inline-block;}

#main_trends_section .transaction_assets ul li:nth-of-type(1){width: 15%; text-align: left;}
#main_trends_section .transaction_assets ul li:nth-of-type(2){width: 25%; text-align: left; }
#main_trends_section .transaction_assets ul li:nth-of-type(3){width: 40%; text-align: right;}
#main_trends_section .transaction_assets ul li:nth-of-type(4){width: 20%; text-align: right;}
#main_trends_section .transaction_assets ul li em{ display: inline-block;}

#main_trends_section .average_assets ul li:nth-of-type(1){width: 11%; text-align: left;}
#main_trends_section .average_assets ul li:nth-of-type(2){width: 26%; text-align: left; }
#main_trends_section .average_assets ul li:nth-of-type(3){width: 19%; text-align: right;}
#main_trends_section .average_assets ul li:nth-of-type(4){width: 14%; text-align: left;}
#main_trends_section .average_assets ul li:nth-of-type(5){width: 30%; text-align: right;}
#main_trends_section .average_assets ul li em{ display: inline-block;}




.st_level{ display: inline-block; border-radius: 20px; border:2px solid transparent; font-size: 14px; font-weight: 600; width:80px; line-height: 21px; text-align: center;}
.st_level.type_a{ border-color: #2e5de5;}
.st_level.type_b{ border-color: #2fc669;}
.st_level.type_c{ border-color: #e5d12e;}
.st_level.type_d{ border-color: #e59d2e;}
.st_level.type_nr{ border-color: #e52e2e;}

.gauge > svg{height:220px;}

.rising_assets{}
.falling_assets{}
.cautionary_assets{}
.recently_added_assets{}



/*메인_등급공시*/
#main_top30_section {padding: 70px 10%;}
#main_top30_section h3{display: flex; flex-wrap: wrap;  position: relative; align-items: center; margin-bottom: 50px;}
#main_top30_section h3 strong{font-size: 30px;}
#main_top30_section h3 .btn_more{position: absolute; display: block; width: 90px; height: 34px; line-height: 34px; right: 0; top:50%; transform: translateY(-50%);border-radius: 20px; background: #000 url("/images/main_more.png") 15px center no-repeat; font-size:15px; color: #fff; padding-left: 35px;}

#main_top30_section h3 .market_guide{ width: 50%; margin-left: 20px; }
#main_top30_section h3 .market_guide ul{display: flex; align-items: center;gap:3px; }
#main_top30_section h3 .market_guide ul li{ flex: 1; text-align: center;  }
#main_top30_section h3 .market_guide ul li a{background:#eee; font-weight: 400; font-size: 16px; display: block;padding: 10px 1%; border-radius: 5px; white-space: nowrap;}
#main_top30_section h3 .market_guide ul li a:hover,
#main_top30_section h3 .market_guide ul li a:focus{background:#68b3fb; color: #fff; }
#main_top30_section h3 .market_guide ul li.active a{background:#16278e; color: #fff;}



@media all and (max-width :1520px) {
	#main_top30_section {padding: 70px 5%;}	
}

@media all and (max-width :1280px) {
	#main_top30_section {padding: 60px 3%;}	
}

@media all and (max-width :1024px) {
	#main_top30_section {padding: 50px 3%;}	
	#main_top30_section h3 strong{font-size: 30px;}
}

@media all and (max-width :767px) {
	#main_top30_section {padding: 40px 5%;}	
	#main_top30_section h3{margin-bottom: 20px;}
	#main_top30_section h3 strong{font-size: 26px;}
	#main_top30_section h3 .btn_more{top:20px; top:15px; }
	#main_top30_section h3 .market_guide{ width: 100%; margin-left: 00px; margin-top: 15px;}
}







/*등급현황 상세페이지******************************************************************************************/

.view_detail_guide{position: relative;}
.view_detail_guide > div{margin-bottom: 60px;}

@media all and (max-width :767px) {
.view_detail_guide > div{margin-bottom: 40px;}
	}

.view_share{position: absolute; top: 40px; right: 40px; z-index: 3;}
.view_share a{ display: inline-block; width: 115px; background: #000 url("/images/icon_share.png") 15px center no-repeat; color: #fff;  padding: 10px 0;padding-left: 45px; border-radius: 20px; }
.view_share a:hover,
.view_share a:focus{ background-color: #16278e;}

.share_guide{ width: 400px;}
.share_guide .modal_contents > div{display: flex; justify-content: center;}
.share_guide .modal_contents .sns{gap:10px; }
.share_guide .sns button{background: none;}
.share_guide .modal_contents .sns img{width: 45px;}
.share_guide .modal_contents .link_copy{ gap:5px; margin-top: 20px;}
.share_guide .modal_contents .link_copy input{width: calc(100% - 75px); padding-left: 10px;font-size: 15px; background: #eee; border:none; }
.share_guide .modal_contents .link_copy button{width:70px; background: #000;color: #fff;font-size: 14px;}

@media all and (max-width :767px) {
.view_share{top:-10px; right: 0px; }
.view_share a{width:40px; height: 40px; background: #000 url("/images/icon_share.png")  center no-repeat; background-size: 18px; padding: 0; overflow: hidden; text-indent: -500px;}
	}


.view_detail{position: relative; padding: 10px;background: #ededed; border-radius: 30px; overflow: hidden;}
.view_detail:before{position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 50%; background: #68b3fb;}
.view_detail > div{position: relative;padding: 30px; background: #fff; border-radius: 20px; }
.view_detail > div ul li > em{ display: inline-block;  margin: 0 3px 3px 0; border-radius: 15px; background: #7582a8; color: #fff; line-height: 30px; font-size: 15px; padding: 0 15px;}

.view_detail > div ul:nth-of-type(1) li:nth-of-type(2){display: flex; align-items: center; gap:50px; margin: 30px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div{display: flex;justify-content: center;align-items: center;gap: 10px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div span{font-size: 16px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div strong{font-size: 70px; font-weight: 700;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(3){font-size: 14px; color: #777; margin: 0;} 
.view_detail > div ul:nth-of-type(1) li:nth-of-type(3) > span{padding: 0 30px;}

.view_detail > div .view_link{position: absolute; bottom: 25px; right: 30px; display: flex; justify-content: flex-end;}
.view_detail > div .view_link li{margin-left: 5px;}
.view_detail > div .view_link img{width: 55px;}

@media all and (max-width :1024px) {
.view_detail{padding: 7px;}
.view_detail > div ul:nth-of-type(1){position: relative;}
.view_detail > div .view_link{position: relative; right: inherit; bottom: inherit; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 20px; border-top:1px solid #eee; padding-top: 20px;}
.view_detail > div .view_link li{margin: 2px;}	
}

@media all and (max-width :767px) {
.view_detail > div{ padding: 20px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2){gap:20px; justify-content: center; margin: 20px 0; }
.view_detail > div ul:nth-of-type(1)  li > em{ line-height: 25px; font-size: 14px; }
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div span{font-size: 14px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div strong{font-size: 45px; }
.view_detail > div ul:nth-of-type(1) li:nth-of-type(3) > span{padding: 0 5px;}
.view_detail > div .view_link img{width: 34px;}
}

@media all and (max-width :480px) {
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2){gap:10px; }
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div{gap: 5px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div span{font-size: 12px;}
.view_detail > div ul:nth-of-type(1) li:nth-of-type(2) div strong{font-size: 38px; }
.view_detail > div ul:nth-of-type(1) li:nth-of-type(3){ font-size: 13px;}
}


.view_overview > div{line-height: 1.6em;}
.view_overview .hashtag{ margin-top: 10px;}
.view_overview .hashtag a{display: inline-block; margin: 0 3px 3px 0; border-radius: 15px; background: #fff; color: #1c1598; border:1px solid #ddd; line-height: 30px; font-size: 15px; padding: 0 15px;}

.view_graph{display: flex; justify-content: space-between; flex-wrap: wrap; }
.view_graph > div{ width: 35%;}
.view_graph > div:nth-of-type(1){ width: 30%;}
.view_graph > div:nth-of-type(2){ width: 31%;}
.view_graph > div:nth-of-type(4){ width: 100%; margin-top: 60px;}
.view_graph > div > div{ background: #f2f4f9; padding: 30px; border-radius: 15px; text-align: center; height: 300px; display: flex; align-items: center; justify-content: center;}
.view_graph > div:nth-of-type(1) > div {padding: 0px;}
.view_graph > div:nth-of-type(1) > div > canvas {
    display: block; /* 캔버스를 block 요소로 설정 */
    margin: 0 auto; /* 수평 가운데 정렬 */
}
.view_graph > div > div > img{max-width: 100%; height: 180px;}

.view_graph table{width: 100%;}
.view_graph table thead th{border-bottom: #d9dbe0 solid 2px; border-left: #d9dbe0 solid 1px; padding: 8px 0 8px 10px; text-align: left;}
.view_graph table thead th > span{display: inline-block;  line-height:22px; padding: 0 10px; border-radius: 15px; color: #fff; font-size: 14px; margin-right: 5px; }
.view_graph table thead th:first-of-type{border-left: none; text-align: left; padding: 8px 0; }
.view_graph table tbody th{border-top: #d9dbe0 solid 1px; border-right: #d9dbe0 solid 1px;padding: 8px 0; text-align: left;}
.view_graph table tbody td{border-top: #d9dbe0 solid 1px;padding: 8px 0 8px 10px; text-align: left;}
.view_graph table tbody td > span{display: inline-block;  line-height:22px; padding: 0 10px; border-radius: 15px; color: #fff; font-size: 14px; margin-right: 5px; }
.view_graph .th1{ background: #ff0000;}
.view_graph .th2{background: #ff5050;}
.view_graph .th3{background: #ff7c80;}
.view_graph .tn{background: #ffc000;}
.view_graph .tl1{background: #0000ff;}
.view_graph .tl2{background: #0066ff;}
.view_graph .tl3{background: #3399ff;}


@media all and (max-width :1023px) {	
.view_graph{flex-direction: column;}
.view_graph > div{ width: 100%; margin-top: 40px;}
.view_graph > div:nth-of-type(1){ width: 100%; margin-top: 0px;}
.view_graph > div:nth-of-type(2){ width: 100%;}
.view_graph > div > div{height: auto;}

}

@media all and (max-width :767px) {
.view_overview .hashtag a{line-height: 25px; font-size: 14px;}	

}


/*시장, 커뮤니티, 개발, 보안 공통 */
.view_detail_guide .graph{text-align: center; background: #f2f4f9; padding: 30px; border-radius:0 0 15px 15px;}
.view_detail_guide .graph img{max-width: 100%; min-height: 150px;}
.view_detail_guide .info{text-align: center;}
.view_detail_guide .info ul{background: #dce0ea; border-radius:15px 15px 0 0; display: flex; justify-content: space-between;flex-wrap: wrap;}
.view_detail_guide .info ul li{width: 25%; border-left:1px solid #fff; padding: 20px;}
.view_detail_guide .info ul li:first-of-type{border-left: none;}
.view_detail_guide .info ul li > *{display: block;}
.view_detail_guide .info ul li > span{font-size: 15px; color: #777; text-align: left; margin-bottom: 15px;}
.view_detail_guide .info ul li > strong{font-size: 28px;}
.view_detail_guide .info ul li > strong > span{font-size: 20px; color: #2513d2;}
.view_detail_guide .s_txt{text-align: right; margin-top: 5px;}
.view_detail_guide .s_txt .new_win{ background: url("/images/icon_newwin02.png") right center no-repeat; padding-right: 25px;}

@media all and (max-width :1280px) {
.view_detail_guide .info ul li > strong{font-size: 24px;}
.view_detail_guide .info ul li > strong > span{display: block; font-size: 16px;}
}

@media all and (max-width :767px) {
.view_detail_guide .graph{padding: 20px;}
.view_detail_guide .info ul li{width: 50%; padding: 10px;}
.view_detail_guide .info ul li:nth-of-type(3){ border-top:1px solid #fff;}
.view_detail_guide .info ul li:last-of-type{border-top:1px solid #fff;}
.view_detail_guide .info ul li > span{margin-bottom: 5px; font-size: 14px; }
.view_detail_guide .info ul li > strong{font-size: 20px;}
.view_detail_guide .info ul li > strong > span{font-size: 16px;}
}



.view_market{ }
.view_market > .graph{border-radius: 15px 15px 0 0;}
.view_market > .info ul{border-radius:0 0 15px 15px;}
.view_market > .info ul li{width: 24%;}
.view_market > .info ul li:last-of-type{width: 28%; }
.view_market > .info ul li > strong > b{font-size: 24px; display: block;}
.view_market > .info ul li > strong > b > img{width: 24px; vertical-align: middle; margin-top: -2px;}

.view_exchanges > .market{position: relative; display: flex; flex-wrap: wrap; gap:50px; background: #f2f4f9; padding: 30px; padding-right: 210px; border-radius: 15px;}
.view_exchanges > .market > dl{display: flex; gap:30px; align-items: center;}
.view_exchanges > .market > dl > dt{white-space: nowrap;}
.view_exchanges > .market > dl > dd{display: flex; }
.view_exchanges > .market > dl > dd img{width: 40px; margin: 0 10px;}
.view_exchanges > .market > dl:nth-of-type(1){}
.view_exchanges > .market > dl:nth-of-type(2){width: calc(100% - 420px);}
.view_exchanges > .market > dl:nth-of-type(2) > dd{ position: relative; overflow: hidden;}
.view_exchanges > .market > dl:nth-of-type(2) > dd:before{position: absolute; display: block; content: ''; top: 0; right:0; width: 70px; height: 40px; background: linear-gradient(to right, rgba(242, 244, 249, 0), #f2f4f9);}
.view_exchanges > .market > button{position: absolute; top:50%; transform: translateY(-50%); right: 30px; background: #000; color: #fff; padding: 10px 20px; border-radius: 5px;}
.view_exchanges > .market .market_all_popup{display: none; position: absolute; width:600px; min-height: 300px; padding:40px; background:#fff; border-radius:30px; top:50%;  left: 50%; transform: translate(-50%, -50%); z-index:11; box-shadow: 0 0px 30px rgba(0,0,0,0.5);}
.view_exchanges > .market .market_all_popup .btn_close{position: absolute; font-size: 50px; display: inline-block; cursor: pointer; top: 20px; right: 30px;}
.view_exchanges > .market .market_all_popup h5{font-size: 24px!important; margin-bottom: 30px!important;}
.view_exchanges > .market .market_all_popup h6{text-align: left;}
.view_exchanges > .market .market_all_popup img{width: 40px; margin: 0 10px;}
.view_exchanges > .market .market_all_popup dl{margin-bottom: 30px;}
.view_exchanges > .market .market_all_popup dl dt{ font-size: 20px; margin-bottom: 20px; text-decoration: underline;}
.view_exchanges > .market .market_all_popup dl dd{text-align: center; background: #f2f4f9; padding: 30px;}
.view_exchanges > .market .market_all_popup dl:nth-of-type(2) dd img{margin: 10px;}


@media all and (max-width :1280px) {
.view_market > .info ul li > strong > b{font-size: 18px;}
.view_market > .info ul li > strong > b > img{width: 20px; margin-top: -2px;}
}

@media all and (max-width :1024px) {
.view_exchanges > .market{gap:20px;}
.view_exchanges > .market > dl:nth-of-type(2){width:100%;}	
}

@media all and (max-width :767px) {
.view_market > .info ul li{width: 50%;}
.view_market > .info ul li:last-of-type{width: 50%; }
.view_market > .info ul li > strong > b{ font-size: 17px;}
	
.view_exchanges > .market{flex-direction: column; gap:20px; padding: 20px;}
.view_exchanges > .market > dl{}
.view_exchanges > .market > dl > dd img{width: 34px;}
.view_exchanges > .market > button{position: inherit; top:inherit; transform: translateY(0%); right: inherit; }
	
.view_exchanges > .market .market_all_popup{ width:100%; padding:30px;}
.view_exchanges > .market .market_all_popup img{width: 34px; margin: 0 5px;}
}
@media all and (max-width :480px) {
.view_exchanges > .market > dl{gap:20px; }
.view_exchanges > .market > dl > dd img{ margin:0 5px;}
	
.view_exchanges > .market .market_all_popup dl dd{padding: 10px;}
.view_exchanges > .market .market_all_popup dl:nth-of-type(2) dd img{margin: 10px 5px;}
}

.view_community > .info ul li > span{position: relative;}
.view_community > .info ul li > span > a{position: absolute; width: 20px; height: 20px; overflow: hidden; text-indent: -500px; background: url("/images/icon_newwin02.png") center no-repeat; top:0; right: 0;}
.view_community > .graph{display: flex;flex-wrap: wrap; /*align-items: center;*/ padding: 20px;}
.view_community > .graph > div{width: 75%; padding-left: 20px;}
.view_community > .graph > div:first-of-type{width: 25%; background: #fff; border-radius: 15px; padding: 20px;}
.view_community > .graph > div:first-of-type > *{display: block;}
.view_community > .graph > div:first-of-type > span{font-size: 15px; color: #777; text-align: left; margin-bottom: 15px;}
.view_community > .graph > div:first-of-type > strong{font-size: 28px;}
.view_community > .graph > div:first-of-type > strong > span{font-size: 20px; color: #2513d2;}


@media all and (max-width :767px) {
.view_community > .graph > div{width: 100%;padding:0px;}
.view_community > .graph > div:first-of-type{width: 100%; margin-bottom: 20px; }
.view_community > .graph > div:first-of-type > span{font-size: 14px; }
.view_community > .graph > div:first-of-type > strong{font-size: 20px;}
.view_community > .graph > div:first-of-type > strong > span{font-size: 16px; }
}




.view_develop > .info ul li{width: 33.33%;}
.view_develop > .info ul li > strong img{vertical-align: middle; margin-top: -5px; width: 35px;}
.view_develop > .info ul li > strong .new_win{background: url("/images/icon_newwin03.png") right center no-repeat; padding-right: 30px;}

@media all and (max-width :767px) {
.view_develop > .info ul li{width:100%;}
.view_develop > .info ul li:first-of-type{border-bottom: 1px solid #fff;}
.view_develop > .info ul li > strong > span{display: inline;}
}



.view_security > .info ul{border-radius: 15px;}
.view_security > .info ul li{width: 50%;}

@media all and (max-width :767px) {
.view_security > .info ul li:last-of-type{border-top: none;}
}


@media all and (max-width :480px) {
.view_security > .info ul li{width: 100%;}
.view_security > .info ul li{border-bottom: 1px solid #fff;;}
.view_security > .info ul li:last-of-type{border-bottom: none;}
}



.view_issue > div{background: #f2f4f9; display: flex; border-radius:15px;}
.view_issue > div dl{flex: 1; padding: 30px; }
.view_issue > div dl:first-of-type{border-right: 1px solid #ddd; }
.view_issue > div dl dt{margin-bottom: 10px;}
.view_issue > div dl dt > strong{text-decoration: underline; font-size: 20px;}
.view_issue > div dl dd{margin: 5px 0; background: url("/images/icon08.gif") left 6px no-repeat; padding-left: 10px; }
.view_issue > div dl dd a{}
.view_issue > div dl dd a > span{color: #777; padding-right: 15px;}
.view_issue > div dl dd .new_win{background: url("/images/icon_newwin02.png") right center no-repeat; padding-right: 22px;}

@media all and (max-width :767px) {
.view_issue > div{flex-direction: column;}
.view_issue > div dl:first-of-type{border-right: none; border-bottom: 1px solid #ddd;}
}



.view_history{position: relative;}
.view_history .bbs_list01 table td{/*white-space: nowrap;*/}
.view_history .bbs_list01 table tbody tr:hover{ cursor: inherit;}
.view_history .tab_guide{position: absolute; margin-bottom: 0; top: -5px; left: 130px;}



@media all and (max-width :767px) {
.view_history .bbs_list01 table thead{display: none;}
.view_history .bbs_list01 table{border-top:2px solid #16278e;border-bottom:2px solid #16278e;}
.view_history .bbs_list01 table td.market{display: inline-block!important;}

.view_history .tab_guide{ position: relative; left: 0px;}	
}


.view_info{ background: #f9f2f2; padding: 30px; border-radius: 15px;}
.view_info dl dt{position: relative; font-size: 20px; margin-bottom: 10px;}
.view_info dl dt:before{position: relative; display: inline-block; content: '!'; font-weight: 600; font-size: 15px;  line-height: 25px; text-align: center; width: 25px; height: 25px;  margin-right: 5px; color: #fff; border-radius: 50%; background: #ff8a00;}
.view_info dl dd{line-height: 1.8em; word-break: keep-all;}




/* 서브페이지 **********************************************************************************************/

.sub_guide{line-height: 1.6em;}
.sub_guide > div{ margin-bottom: 70px;}


.sub02_01{}
.sub02_01 > div:first-of-type{ /*background: #f6f6f6; padding: 30px; border-radius: 20px;*/ margin-bottom: 30px;}
.sub02_01 > div:nth-of-type(2){ display: flex; gap:30px;}
.sub02_01 > div:nth-of-type(2) > dl{position: relative; border:1px solid #ddd; border-radius: 20px; overflow: hidden; flex: 1; padding-bottom: 60px;}
.sub02_01 > div:nth-of-type(2) > dl dt{background: linear-gradient(45deg, #00dcb0, #68b3fb); color: #fff; font-size: 20px;  padding: 20px 0; text-align: center;}
.sub02_01 > div:nth-of-type(2) > dl dd{padding: 30px; margin-bottom: 30px;}
.sub02_01 > div:nth-of-type(2) > dl dd > a{position: absolute; bottom: 30px; left:30px; width: calc(100% - 60px); display: block; text-align: center; background: #e0f0fc; color: #16278e; /*border:1px solid #ddd; */padding: 20px 0; border-radius: 30px; font-size: 16px;}
.sub02_01 > div:nth-of-type(2) > dl dd > a:hover,
.sub02_01 > div:nth-of-type(2) > dl dd > a:focus{background: #16278e; color: #fff; font-size: 18px;}

@media all and (max-width :767px) {
	.sub02_01 > div:nth-of-type(2){flex-direction: column; gap:00px;}
	.sub02_01 > div:nth-of-type(2) > dl:first-of-type{margin-bottom: 20px;}
}


.sub02_02{}
.sub02_02 ul{display: flex; justify-content:space-between; flex-wrap: wrap; gap:20px; margin-bottom: 15px;}
.sub02_02 ul li{position: relative;width: calc((100% - 40px) / 3); border:1px solid #ddd; min-height: 150px; text-align: center; border-radius: 50px 5px; padding: 30px; display: flex; justify-content: center; flex-direction: column; align-items: center;} 
.sub02_02 ul li:before{position: absolute; content: ''; display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; right:-15px; top:50%; transform: translateY(-50%); background: #fff url("/images/icon_arrow01.png") center no-repeat; border:1px solid #ddd;}
.sub02_02 ul li:last-of-type:before{display: none;}
.sub02_02 ul li:hover{background: #e0f0fc;border:1px solid #e0f0fc;}
.sub02_02 ul li > *{word-break: keep-all;}
.sub02_02 ul li > strong{font-size: 18px; margin-bottom: 10px;}
.sub02_02 ul li > span{color: #777;}
.sub02_02 p{font-size: 14px; color: #552ab8;}

@media all and (max-width :767px) {
	.sub02_02 ul li{width: calc((100% - 20px) / 2); } 
}
@media all and (max-width :480px) {
	.sub02_02 ul li{width: 100%; } 
	.sub02_02 ul li:before{ right:inherit; top:inherit; bottom: -15px; left: 50%; transform: translate(-50%, 0) rotate(90deg); }
}



/*샘플보기*/
.sample_area{position: relative;padding:40px; border-radius: 20px; border:1px solid #ddd;}
.sample_area > a{position: absolute;top: 50%; transform: translateY(-50%);width: 50px; height: 50px;  background-color: rgba(0,0,0,0.12); background-position: center; background-repeat: no-repeat;border-radius: 50%; z-index: 111;}
.sample_area .prev{left: 10px;}
.sample_area .next{right: 10px;}
.sample_area .sample_list{display: flex;}
.sample_area .sample_box{ padding: 0 25px;}
.sample_area .sample_box img {
	width: 100%; 
	min-height: 100%; 
	transition: all 0.2s;
	border: 1px solid #ccc;		/* 테두리 추가 */
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* 약간의 그림자 효과 */
}





.sub03_01{ word-break: keep-all;}
.sub03_01 > div{margin-bottom: 20px;word-break: keep-all;}
.sub03_01 dl{margin-bottom: 20px; border:1px solid #ddd; padding: 30px; border-radius: 15px;}
.sub03_01 dl dt{margin-bottom: 10px; font-size: 20px;color: #2e92f2;}
.sub03_01 ul{margin-top: 10px; margin-left: 20px; line-height: 1.8em;}
.sub03_01 ul li{background: url("/images/icon08.gif") left 9px no-repeat;padding-left: 12px;}
.ctable { width: 100%; text-align: center;border: 1px solid #dee2e6!important;font-size: 16px;}
.ctable th,
.ctable td { padding: 10px 1%; border: 1px solid #dee2e6 !important; /* 테두리가 명확하게 보이도록 설정 */}
.ctable th{background-color: #f8f9fa; vertical-align: middle;}


@media all and (max-width :767px) {
	.sub03_01 ul{margin-left: 00px;}
}





