@charset "utf-8";
/* 시각화 공통 설명화면 */

/* Topic */
.TopicInfo {height:0;transition:height 0.2s;position:relative;z-index:999;overflow:hidden;background: #4579FD;display: flex;align-items: center;justify-content: space-between;padding-right:40px !important;flex-wrap: wrap;}
.TopicInfo.Open {min-height: 100px;height: auto;padding: 10px 0;}
.TopicInfo::before { content:''; display:block; width:86px; height:74px; background:#fff; border-radius:0 50px 50px 0; opacity:0.25; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.TopicInfo::after { content:''; display:block; width:18px; height:18px; background:linear-gradient(135deg, rgba(255 255 255/30%) 50%, #000 50%); position:absolute; right:0; bottom:0;}
.TopicInfo .InfoCont { padding-left:110px; position:relative;}
.TopicInfo .InfoCont::before { content:''; display:block; width:90px; height:76px; position:absolute; left:0; top:50%; transform:translateY(-50%);background:url("../../images/economyBoard/main/icon_notice.svg") no-repeat right center; background-size:contain;}
.TopicInfo .InfoCont h1 {color:#fff;font-size:26px;letter-spacing:-1px;margin-bottom: 10px;line-height: 1.1;}
.TopicInfo .InfoCont ul {display:inline-flex;margin-bottom: 5px;}
.TopicInfo .InfoCont ul li { font-size:16px; color:#fff; margin-right:7px}
.TopicInfo .InfoCont ul li::before { content:url("../../images/economyBoard/main/icon_v.svg"); display:inline-flex; margin-right:3px}
.TopicInfo .InfoCont .BtnDown {height:32px;background:#fff;font-size:14px;padding:0 13px;border-radius:20px;border:#333 solid 1px;border-bottom-width:3px;display: inline-flex;align-items: center;}
.TopicInfo .InfoCont .BtnDown>i { display:inline-flex; width:20px; height:21px; margin-right:4px;}
.TopicInfo .InfoCont .BtnDown>i.icon_pdf { background:url("../../images/economyBoard/main/icon_pdf.svg") no-repeat center center; font-size:0; background-size:contain;}
.TopicInfo .CloseSet {color:#fff;padding-left: 110px;}
.TopicInfo .CloseSet >* {display:flex;align-items: center;}
.TopicInfo .CloseSet input[type=radio] { width:0; height:0; position:absolute;}
.TopicInfo .CloseSet input[type=radio]+label { padding-left:30px; display:inline-flex; margin-right:10px; position:relative}
.TopicInfo .CloseSet input[type=radio]+label::before { content:''; display:block; width:22px; height:22px; background:#fff; border-radius:50%; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.TopicInfo .CloseSet input[type=radio]+label::after { content:''; display:block; width:10px; height:10px; background:#4579FD; border-radius:50%; position:absolute; left:6px; top:50%; transform:translateY(-50%); transition:all 0.2s; opacity:0;}
.TopicInfo .CloseSet input[type=radio]:checked+label::after {opacity:1}
.TopicInfo .BtnClose { width:29px; height:29px; font-size:0; text-indent:-1000px; overflow:hidden; position:relative;}
.TopicInfo .BtnClose::before, .TopicInfo .BtnClose::after { content:''; display:block; width:100%; height:1px; background:#fff; position:absolute; transition:all 0.2s; }
.TopicInfo .BtnClose::before {transform:rotate(45deg);}
.TopicInfo .BtnClose::after {transform:rotate(-45deg);}
.TopicInfo .BtnClose:hover::before {transform:rotate(135deg);}
.TopicInfo .BtnClose:hover::after {transform:rotate(45deg);}

@media (max-width:768px) {
	.TopicInfo .InfoCont h1 {font-size: 22px;}
	.TopicInfo .CloseSet input[type=radio]+label { font-size:14px}
}
@media (max-width:600px) {
	.TopicInfo::before { content:none}
	.TopicInfo .InfoCont { padding-left:65px;}
	.TopicInfo .InfoCont h1 { font-size:18px}
	.TopicInfo .InfoCont::before { width: 55px; background-position: right top; top: 0px; transform: none; }
	.TopicInfo .InfoCont ul { display:flex; flex-direction: column;}
	.TopicInfo .CloseSet {padding-left:65px;}
	.TopicInfo .InfoCont .BtnDown { margin-bottom:5px;}
}
@media (max-width:490px) {
	.TopicInfo .InfoCont ul {display:flex;flex-direction: column;}
}