@charset "utf-8";

/* IX 서비스 *******************************************************************************/

/* 	sub_visual */
.ix .visual_box {background-image: url(/img/ix/visual.jpg);}
.ix_diagram{background:#F0FBFC; padding:70px;}
.ix_diagram .diagram_box{display:flex; align-items:center; justify-content:space-between;}

.ix_diagram .diagram_box img{margin-top:48px; width:56px; max-width:4.74%;}
.ix_diagram .diagram_box .cell {margin-bottom: auto; }
.ix_diagram .diagram_box .cell img{margin-left:auto; margin-right:auto;}
.ix_diagram .diagram_box .cell img.pc{display:block; }
.ix_diagram .diagram_box .cell div{height:48px; line-height:48px; text-align:center; font-size:20px; font-weight:700; color:#fff;}


.ix_diagram .diagram_box .cell.left{width:440px; max-width:37.28%;}
.ix_diagram .diagram_box .cell.left img{ width:388px; max-width:100%;}
.ix_diagram .diagram_box .cell.left div{background:#37416B;}

.ix_diagram .diagram_box .cell.right{width:640px; max-width:54.23%;}
.ix_diagram .diagram_box .cell.right img{margin-top:0; padding-right:34px; width:566px; max-width:100%; box-sizing:content-box;}
.ix_diagram .diagram_box .cell.right div{background:#ED1B23;}

.ix.panel_wrap .features_panel .icon_box ul li .txt1{margin-top:20px; margin-bottom:20px;}
.ix.panel_wrap .features_panel .icon_box .comm_dotlist{display:block;}
.ix.panel_wrap .features_panel .icon_box .comm_dotlist li{width:100%; display: block; padding-right:0}

.ix .participation_panel .table_box .left{width:calc((100% - 30px) / 2); padding-right:15px;}
.ix .participation_panel .table_box .right{width:calc((100% - 30px) / 2); padding-left:15px;}
.ix .participation_panel .table_box img{width:100%;}
.ix .participation_panel .table_box img.pc{ display:block;}
.ix .participation_panel .table_box .txt1{margin-top:30px; font-size:28px; font-weight:700;}
.ix .participation_panel .table_box .txt2{margin-top:15px; height:64px; font-size:18px; font-weight:400; color:#666666;}
.ix .participation_panel .table_box a{display:inline-flex; margin-top:15px; gap:10px; align-items:center; line-height:1; font-size:16px; font-weight:700; color:#151515;}
.ix .participation_panel .table_box a img{width: auto;}

.ix .participation_panel .table_box .onecard{display:flex;}
.ix .participation_panel .table_box .onecard > *{flex:1;}
.ix .participation_panel .table_box .onecard .text_box{display:flex; flex-direction: column; justify-content:center; border:1px solid #E2E2E2; border-left:none; padding:51px 50px;}
.ix .participation_panel .table_box .onecard .text_box .txt1{margin-top:0;}

.ix.panel_wrap.near_contents{ margin-top:60px; }

.ix .box_panel .comm_table{overflow:auto;}
.ix .box_panel .comm_table.tb_center table th,
.ix .box_panel .comm_table.tb_center table td{text-align:center;}

.ix .tab_wrap .tab_tit_wrap{display:flex;}
.ix .tab_wrap .tab_tit_wrap button{flex:1; height:50px; display:flex; justify-content:center; align-items:center; border:1px solid #E2E2E2; background:none; color:#aaa; font-size:16px; font-weight:400;}
.ix .tab_wrap .tab_tit_wrap button.on{ background:#222D5B; border:none; color:#fff; font-size:16px; font-weight:700}
.ix .tab_wrap .tab_con{display:none; padding-top:40px; }
.ix .tab_wrap .tab_con.on{display:block}

/* 기존 style 시작 */
.ix .tab_wrap .tab_con div {border-bottom: 2px solid #aaa; padding-bottom: 10px; margin-bottom: 5px;}
.ix .tab_wrap .tab_con	div h2 {font-size: 1.2em;}
.ix .tab_wrap .tab_con	div.graph img { margin: 5px 0; }
.ix .tab_wrap .tab_con	div.graph table, div#legend table {font-size: .8em;}
.ix .tab_wrap .tab_con	div.graph table td {padding: 0 10px; text-align: right;}
.ix .tab_wrap .tab_con	div table .in th, div table td span.in {color: #00cc00;}
.ix .tab_wrap .tab_con	div table .out th, div table td span.out {color: #0000ff;}
.ix .tab_wrap .tab_con	div#legend th {text-align: right;}
.ix .tab_wrap .tab_con	div#footer {border: none; font-size: .8em; font-family: Arial, Helvetica, sans-serif; width: 476px; }
.ix .tab_wrap .tab_con	div#footer img { border: none; height: 25px; }
.ix .tab_wrap .tab_con	div#footer address { text-align: right; }
.ix .tab_wrap .tab_con	div#footer #version { margin: 0; padding: 0; float: left; width: 88px; text-align: right;}
/* 기존 style 끝 */

.ix .tab_wrap .tab_con *{font-family:'SpoqaHanSansNeo', Arial, sans-serif}
.ix .tab_wrap .tab_con p{font-size:18px;}
.ix .tab_wrap .tab_con div{border-bottom:none; padding-bottom:0; margin-bottom:0;}
.ix .tab_wrap .tab_con div h2{margin-top:80px; font-size:28px; line-height:34px; margin-bottom:30px; font-weight:700; color:#222D5B;}
.ix .tab_wrap .tab_con div h2:first-child{margin-top:40px;}
.ix .tab_wrap .tab_con div.graph .graph{display:none;}
.ix .tab_wrap .tab_con div.graph img{margin:0; width:100%;}
.ix .tab_wrap .tab_con div.graph table td{padding:0;}
.ix .tab_wrap .tab_con div.graph table td:nth-child(2){width:47.69%; padding-left:40px;}
.ix .tab_wrap .tab_con div.graph table table th{padding:0 !important; font-size:36px !important; font-weight:700; color:#222D5B !important; letter-spacing:-0.5px}
.ix .tab_wrap .tab_con div.graph table table tr:first-child th{height:31px !important; padding-bottom:10px !important; font-size:16px !important; text-transform:uppercase; font-weight:700; color:#151515 !important; }
.ix .tab_wrap .tab_con div.graph table table tr:first-child th + th{text-transform:none;}
.ix .tab_wrap .tab_con div.graph table table .in th{height:24px; font-size:16px !important; text-transform:uppercase; font-weight:700; color:#33D95A !important; }
.ix .tab_wrap .tab_con div.graph table table .in + tr th{height: 43px !important; line-height: 1;}
.ix .tab_wrap .tab_con div.graph table table .out th{height:44px; padding-top:20px !important; font-size:16px !important; text-transform:uppercase; font-weight:700; color:#24C4DC !important;}
.ix .tab_wrap .tab_con div.graph table table .out + tr th{height: 43px !important; line-height: 1;}
.ix .tab_wrap .tab_con div.graph table table .unit{font-size:12px; color:#aaa; font-weight:700;}

@media screen and (max-width:1400px) {
	.ix_diagram .diagram_box .cell.right img{padding-right:0;}
}
@media screen and (max-width:1220px) {
	.ix .visual_box {background-image: url(/img/ix/visual_t.jpg);}
	.ix.panel_wrap .features_panel .icon_box .comm_dotlist li + li{padding-left:10px;}
	.ix .participation_panel .table_box .left{overflow:hidden; width:calc((100% - 30px) / 2) !important;}
	.ix .participation_panel .table_box .right{overflow:hidden; width:calc((100% - 30px) / 2) !important;}
	.ix .participation_panel .table_box img.pc{display:none;}
	.ix .participation_panel .table_box .txt1{margin-top:20px; font-size:18px;}
	.ix .participation_panel .table_box .txt2{margin-top:10px; height:auto; font-size:14px;}
	.ix .participation_panel .table_box a{margin-top:10px;}

	.ix_diagram{padding:30px;}
	.ix_diagram .diagram_box{flex-direction:column}
	.ix_diagram .diagram_box img{width:auto; margin:30px; max-width:100%;}
	.ix_diagram .diagram_box .cell div{height:40px; line-height:40px; font-size:16px;}
	.ix_diagram .diagram_box .cell.left{width:100%; max-width:100%;}
	.ix_diagram .diagram_box .cell.left img{width:auto; max-width:52.22%; margin-top:30px; margin-bottom:0;}
	.ix_diagram .diagram_box .cell.right{width:100%; max-width:100%}
	.ix_diagram .diagram_box .cell.right img{width:auto; max-width:83.43%; padding-right:32.5px; margin-bottom:0;}

	.ix.panel_wrap .features_panel .table_box .right{margin-top:40px;}

	.ix .sub_service_wrap .cs_box.box1 .txt2{margin-top:30px; line-height:17px; font-size:14px; font-weight:700; color:#151515;}
	.ix .sub_service_wrap .cs_box.box1 .txt3{line-height:36px; font-size:16px;}


	.ix.panel_wrap.near_contents{ margin-top:30px; }
	.ix .box_panel .comm_table.tb_center table{table-layout: fixed; min-width:688px}
	.ix .box_panel .comm_table.tb_center table th,
	.ix .box_panel .comm_table.tb_center table td{width:calc(100% / 7); word-break:break-all;}


	.ix .tab_wrap .tab_con div h2{margin-top:78px;}
	.ix .tab_wrap .tab_con div.graph > table > tbody > tr{display:flex; flex-direction:column}
	.ix .tab_wrap .tab_con div.graph table td:nth-child(2){width:84.30%; padding-left:0; padding-top:38px;}
	.ix .tab_wrap .tab_con div.graph table table td{padding-right:20px;}


}

@media screen and (max-width:1044px) {


}

@media screen and (max-width:767px) {


}

@media screen and (max-width:588px) {

	.ix .visual_box {background-image: url(/img/ix/visual_m.jpg);}
	.ix_diagram .diagram_box .cell.left{max-width:100%;}
	.ix_diagram .diagram_box .cell.left img{max-width:100%}
	.ix_diagram .diagram_box .cell.right{max-width:100%;}
	.ix_diagram .diagram_box .cell.right img{margin-top:22px; padding-right:0; max-width:100%;}
	.ix.panel_wrap .features_panel .table_box .tablet.mobile{display:block !important;}
	.ix.panel_wrap .features_panel .icon_box ul li .txt1{margin-top:0; margin-bottom:5px;}
	.ix.panel_wrap .features_panel .icon_box .comm_dotlist li{padding-left:8px; padding-top:0; padding-bottom:0;}
	.ix.panel_wrap .box_panel .panel_tit .tablet.mobile{display:block !important;}
	.ix .participation_panel .table_box .left{width:100% !important; padding-right:0;}
	.ix .participation_panel .table_box .right{width:100% !important; padding-left:0; margin-top:30px;}

	.ix .participation_panel .table_box .onecard{display:flex; flex-direction: column;}
	.ix .participation_panel .table_box .onecard > *{flex:none;}
	.ix .participation_panel .table_box .onecard .text_box{display:block; border:none; padding:20px 0 0;}


	.ix .sub_service_wrap .cs_box.box1 .tablet.mobile{display:block !important;}
	.ix .sub_service_wrap .cs_box.box1 .txt2{margin-top:10px; line-height:36px;}
	.ix .sub_service_wrap .cs_box.box1 .txt3{margin-top:0; line-height:17px;}

	.ix .tab_wrap .tab_con div h2{margin-top:40px; font-size:20px; margin-bottom:20px;}
	.ix .tab_wrap .tab_con div.graph table td:nth-child(2){width:100%; padding-top:20px;}
	.ix .tab_wrap .tab_con div.graph table table th{font-size:24px !important; line-height:36px !important;}
	.ix .tab_wrap .tab_con div.graph table table tr:first-child th{height: 27px !important; line-height:17px !important; font-size:14px !important}
	.ix .tab_wrap .tab_con div.graph table table .in th{height:20px; line-height:20px !important;}
	.ix .tab_wrap .tab_con div.graph table table .out th{padding-top:10px !important; line-height:20px !important; height:30px;}
	.ix .tab_wrap .tab_con div.graph table table .unit{ display: block; line-height: 14px;}




}

@media screen and (max-width:378px) {



}