@charset "utf-8";

/* common */
.mt0{margin-top:0px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.ml20{margin-left:20px !important; }
.ml0{margin-left:0 !important; }
.mb0{margin-bottom:0 !important; }
.mb20{margin-bottom:20px !important; }
.mb60{margin-bottom:60px !important;}
.mb30{margin-bottom:30px !important;}
.mb20{margin-bottom:20px !important;}
.mb10{margin-bottom:10px !important;}
.vert{vertical-align: top !important}
.f20{font-size:20px;font-weight:600;}
.pd10_25	{ padding:10px 25px; box-sizing:border-box;}
.pt0		{ padding-top:0 !important; }
.pl20{padding-left:20px !important;}
.pb10{padding-bottom:10px !important;}
.pb0{padding-bottom:0px !important;}
.wa_svg		{ width:auto; height:110px; }
.link_blank{text-decoration:underline;}

@media screen and (max-width: 1024px){
	.title_h4 + [data-indent="box"]{margin-left:20px;}
	.title_h5 + [data-indent="box"]{margin-left:20px;}
}


/*준비중 페이지*/
.ready                                                      {background:#f1f6fa;border-radius:10px;padding:6em 2em;flex-flow: column;display:flex;justify-content: center;align-items:center;gap:2.5em;}
.ready .icon                                                 {display:flex;width: 140px;height: 150px;justify-content: center;align-items:center;}
.ready .icon::before                                        {content:'';display:block;background:url(/images/safe/contents/icon_ready.svg) no-repeat center 100%;width: 100%;height: 100%;}
.ready p                                                       {color:var(--color-base);font-size: 3em;text-align:center;}
.ready p strong                                             {font-weight:700;}

@media all and (max-width:768px) {
    .ready                                              {gap:1.5em;padding:4em 2em;}
    .ready p                                            {font-size:2em;}
    .ready .icon                                        {width:80px;height:86px;}
}


@media all and (max-width:468px){
    .ready                                              {gap:1em;padding:3em 1em;}
    .ready p                                            {font-size:1.5em;}
    .ready .icon                                        {width:60px;height:65px;}
}

/************************************************************

				    지진 발생 시 행동요령
 
************************************************************/
[data-subarea="earthquake"] .box_site_list                                  {display:flex;gap:20px;}
[data-subarea="earthquake"] .box_site_list > li                             {display: flex;flex-flow: column;justify-content: center;width:calc((100% - 20px) / 2);border:1px solid #e5e5e5;border-radius:10px;padding:50px 30px;}
[data-subarea="earthquake"] .box_site_list > li .img                       {max-width:178px;margin:0 auto 30px;}
[data-subarea="earthquake"] .box_site_list > li .text                       {text-align:center;}
[data-subarea="earthquake"] .box_site_list > li .text h4                    {font-size:1.5em;font-weight:700;color:var(--color-black1);}

@media screen and (max-width: 1268px) {
    [data-subarea="earthquake"] .box_site_list > li                           {padding:40px 20px;}
    [data-subarea="earthquake"] .box_site_list > li .img                    {margin:0 auto 20px;max-width: 168px;}
    [data-subarea="earthquake"] .box_site_list > li .text h4                {font-size:1.375em;}
}

@media screen and (max-width: 768px) {
	[data-subarea="earthquake"] .box_site_list > li .img                    {max-width: 148px;}
	[data-subarea="earthquake"] .box_site_list > li .text h4                {font-size:1.25em;}
}

@media screen and (max-width: 668px) {
	[data-subarea="earthquake"] .box_site_list                              {flex-flow:column;gap:12px;}
	[data-subarea="earthquake"] .box_site_list > li                         {width:100%;padding:30px;}
	[data-subarea="earthquake"] .box_site_list > li .img                    {max-width: 138px;}
	[data-subarea="earthquake"] .box_site_list > li .text h4                {font-size:1.167em;}
	[data-subarea="earthquake"] .box_site_list > li .text .area_btn         {margin-top:12px;}
}


/************************************************************

					         조직도
 
************************************************************/

[data-subarea="org"] .org-chart                                         {width:100%;position:relative;}
[data-subarea="org"] .org-chart .lv01:before                           {content:'';position:absolute;width:1px;height: calc(100% - 41em);background:var(--color-btnGray);top: 0;left:50%;z-index:-1;}
[data-subarea="org"] .org-chart li > div                                {position: relative;width: 280px;text-align:center;margin:0 auto;color:#fff;display:block;padding: 24px;border-radius:0 30px 0 30px;}
[data-subarea="org"] .org-chart li > div:after                        {content:''; display:block; position:absolute; bottom:-9px; left:50%; width:10px; height:10px; box-sizing:content-box; background-color:var(--color-white); border-radius:100%; border:3px solid #dbdbdb; transform:translateX(-50%);}
[data-subarea="org"] .org-chart li > div > strong                      {display:block;font-size: 20px;padding-bottom: 8px;margin-bottom: 8px;border-bottom:1px solid rgba(255,255,255,.1);}
[data-subarea="org"] .org-chart li > div > span                       {font-size: 17px;}
[data-subarea="org"] .org-chart li > ul                              {margin-top: 2em;}
[data-subarea="org"] .org-chart .lv01 > div                         { background:linear-gradient(to right, #005bac, #00a062); box-shadow: 0 20px 30px rgba(0,0,0,0.1);}
[data-subarea="org"] .org-chart .lv02 > div                         {background:#00a062;}
[data-subarea="org"] .org-chart .lv03                                   {width: 50%;position:relative;}
[data-subarea="org"] .org-chart .lv03 > div                         {background: #118c95;}
[data-subarea="org"] .org-chart .lv03 > div:after                   {display:none;}
[data-subarea="org"] .org-chart .lv03:before                        {position:absolute;top: 50%;content:'';right: 0;width: 50%;height:1px;background:var(--color-btnGray);z-index:-1}
[data-subarea="org"] .org-chart .lv04                                {margin-top: 2em;}
[data-subarea="org"] .org-chart .lv04 > div                         {background:#0f5692;}
[data-subarea="org"] .org-chart .lv04 > ul                             {display:flex;flex-wrap: wrap;position: relative;}
[data-subarea="org"] .org-chart .lv04 > ul:before                   {position:absolute;top: 0;content:'';transform: translateX(-50%);left: 50%;width: 50%;height:1px;background:var(--color-btnGray);z-index:-1}
[data-subarea="org"] .org-chart .lv04 > ul > li:before              {content:'';position:absolute;width:1px;height: calc(100% + 2em);background:var(--color-btnGray);top: 0;left:50%;z-index:-1;}
[data-subarea="org"] .org-chart .lv05                                   {width:50%;position: relative;padding-top: 2em;}
[data-subarea="org"] .org-chart .lv05 > div                          {background:#172247;}
[data-subarea="org"] .org-chart .lv06                                  {width:100%;margin-top: 2em;border:1px solid var(--color-btnGray);background:#f1f6fa;padding:40px;border-radius:20px;}
[data-subarea="org"] .org-chart .lv06:before                            {display:none;}
[data-subarea="org"] .org-chart .lv06 > p                               {font-size:20px;text-align:center;font-weight:700;color:#1f4394;margin-bottom:24px;}
[data-subarea="org"] .org-chart .lv06 > ul                              {display:flex;gap:20px;flex-wrap:wrap;margin-top: 0;}
[data-subarea="org"] .org-chart .lv06 > ul > li                     {width:calc((100% - 80px) / 5);}
[data-subarea="org"] .org-chart .lv06 > ul > li > div               {width: 100%;padding: 0;}
[data-subarea="org"] .org-chart .lv06 > ul > li > div:after       {display:none;}
[data-subarea="org"] .org-chart .lv06 > ul > li strong				{display:block;width:100%;padding:12px 0;border:2px solid #1f4394;text-align:center;background:#eef1fc;border-radius:0 20px 0 0;box-sizing: border-box;color:#263e96;font-size:16px;margin-bottom: 0;letter-spacing:-.08em}
[data-subarea="org"] .org-chart .lv06 > ul > li span				{display:block;width:100%;height:calc(100% - 3.5em);padding: 10px 0;background:#fff;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:0 0 0 20px;font-size: 15px;border-top-width:0;color: var(--color-base);}


@media screen and (max-width: 1024px) {
	[data-subarea="org"] .org-chart .lv01:before                    {height: calc(100% - 46.3em);}
}

@media screen and (max-width: 968px) {
    [data-subarea="org"] .org-chart li > div                        {padding:20px;width:260px;}
    [data-subarea="org"] .org-chart li > div > strong             {font-size:18px; }
	[data-subarea="org"] .org-chart li > div > span                {font-size: 16px;}
	[data-subarea="org"] .org-chart .lv01:before                    {height:calc(100% - 40.2em);}
	[data-subarea="org"] .org-chart .lv06                               {padding:30px;}
	[data-subarea="org"] .org-chart .lv06 > p                       {font-size:18px;margin-bottom:20px;}
	[data-subarea="org"] .org-chart .lv06 > ul                          {gap:14px;}
	[data-subarea="org"] .org-chart .lv06 > ul > li                     {width:calc((100% - 56px) / 5);}
	[data-subarea="org"] .org-chart .lv06 > ul > li strong			{font-size:15px;padding: 10px 0;}
	[data-subarea="org"] .org-chart .lv06 > ul > li span            {font-size:14px;padding: 8px 0;}
}

@media screen and (max-width: 768px) {
	[data-subarea="org"] .org-chart li > div                        {padding:18px;width:240px}
	[data-subarea="org"] .org-chart li > div:after                  {width:8px;height:8px;bottom:-7px;}
	[data-subarea="org"] .org-chart .lv01:before                 {height:calc(100% - 51.9em);}
	[data-subarea="org"] .org-chart .lv06                           {padding:24px;}
	[data-subarea="org"] .org-chart .lv06 > p                       {margin-bottom:16px;}
	[data-subarea="org"] .org-chart .lv06 > ul                      {gap:10px;}
	[data-subarea="org"] .org-chart .lv06 > ul > li                 {width:calc((100% - 20px) / 3);}
}

@media screen and (max-width: 668px) {
	[data-subarea="org"] .org-chart li > div                           {width:calc(100% - 48px);max-width:240px;padding:15px;border-radius: 0 20px 0 20px;}
	[data-subarea="org"] .org-chart li > div > strong             {font-size:17px; }
	[data-subarea="org"] .org-chart li > div > span                {font-size: 15px;}
	[data-subarea="org"] .org-chart .lv01:before                     {height:100%;}
	[data-subarea="org"] .org-chart .lv03,
	[data-subarea="org"] .org-chart .lv05                               {width:100%;}
	[data-subarea="org"] .org-chart .lv03:before,
	[data-subarea="org"] .org-chart .lv05:before                        {display:none;}
	[data-subarea="org"] .org-chart .lv02 > ul                          {margin-top:1.25em;}
	[data-subarea="org"] .org-chart .lv04 > ul:before               {display:none;}
	[data-subarea="org"] .org-chart .lv05:first-child                   {padding-top:0;}
	[data-subarea="org"] .org-chart .lv06                               {border-radius:14px}
	[data-subarea="org"] .org-chart .lv06 > p                           {font-size:17px;}
	[data-subarea="org"] .org-chart .lv06 > ul > li                     {width:calc((100% - 10px) / 2);}
	[data-subarea="org"] .org-chart .lv06 > ul > li strong			{border-radius: 0 14px 0 0;}
	[data-subarea="org"] .org-chart .lv06 > ul > li span               {border-radius: 0 0 0 14px;}
}

@media screen and (max-width: 320px) {
	[data-subarea="org"] .org-chart li > div                            {width:calc(100% - 40px);}
	[data-subarea="org"] .org-chart .lv06                                   {padding:20px;}
	[data-subarea="org"] .org-chart .lv06 > p                           {margin-bottom:12px;}
	[data-subarea="org"] .org-chart .lv06 > ul > li                     {width:100%;}
}


/************************************************************

					    연락체계도
 
************************************************************/

[data-subarea="contact"] .flex                                                      {display:flex;background: #f8f9fa;padding: 60px;gap: 30px;border-radius: 20px;}
[data-subarea="contact"] .flex > ul:not(.con02)                                 {width:calc((100% - 60px - 45%) / 2);}
[data-subarea="contact"] .flex > ul.con02                                       {width:45%;}
[data-subarea="contact"] .flex > ul > li + li                                     {margin-top:2em;}
[data-subarea="contact"] .flex > ul > li dl dt                                      { display:block; width:100%; padding:14px 12px; border:2px solid #1f4394; text-align:center; background:#eef1fc; border-radius:0 20px 0 0; box-sizing: border-box; color:#263e96; font-size:18px; font-weight:600; letter-spacing:-.08em;line-height:1.4;}
[data-subarea="contact"] .flex > ul > li dl dt span                             {display:block;font-weight:400;font-size:16px;opacity:.94;}
[data-subarea="contact"] .flex > ul > li dl dd                                      {padding:14px 12px;font-size:16px;border:1px solid #e5e5e5;text-align:center;background:var(--color-white);}
[data-subarea="contact"] .flex > ul > li dl dd + dd                             {border-top-color:transparent;}
[data-subarea="contact"] .flex > ul > li dl dd ul                                   {margin-top:0;text-align:left;}
[data-subarea="contact"] .flex > ul.con02                                        {position:relative;}
[data-subarea="contact"] .flex > ul.con02 > li                                      {position:relative;z-index:1;}
[data-subarea="contact"] .flex > ul.con02 > li:nth-child( -n + 5):before           {content:'';position:absolute;width:1px;height: 2em;background: #e5e5e5;top:100%;left:50%;z-index: 1;}
[data-subarea="contact"] .flex > ul.con02 > li:last-child                       {position:relative;padding-top:2em;}
[data-subarea="contact"] .flex > ul.con02 > li:last-child:before                {position:absolute;top: 0;content:'';transform: translateX(-50%);left: 50%;width: calc(50% + 10px);height:1px;background:#e5e5e5;z-index:-1;}
[data-subarea="contact"] .flex > ul.con02 > li:last-child dl:before             {content:'';position:absolute;width:1px;height: 2em;background: #e5e5e5;top: 0;left:50%;z-index: 1;}
[data-subarea="contact"] .flex > ul.con02 > li dl                               {width:60%;margin:0 auto;}
[data-subarea="contact"] .flex > ul.con02 > li dl dt                            {background:#0f5692;color:#fff;border-color:#0f5692;}
[data-subarea="contact"] .flex > ul.con02 > li > ul                              {position:Relative;display:flex;gap: 20px;padding-top:2em;}
[data-subarea="contact"] .flex > ul.con02 > li > ul:before                       {position:absolute;top: 0;content:'';transform: translateX(-50%);left: 50%;width: calc(50% + 10px);height:1px;background:#e5e5e5;z-index:-1;}
[data-subarea="contact"] .flex > ul.con02 > li > ul > li                        {position: relative;width:calc((100% - 20px) / 2);}
[data-subarea="contact"] .flex > ul.con02 > li > ul > li:before                 {content:'';position:absolute;width:1px;height: calc(100% + 4em);background: #e5e5e5;top: -2em;left:50%;z-index:-1;}
[data-subarea="contact"] .flex > ul.con02 > li > ul > li dl                     {width:100%;}


@media screen and (max-width: 1468px) {
	[data-subarea="contact"] .flex													{padding:50px;gap: 20px;}
	[data-subarea="contact"] .flex > ul:not(.con02)                              {width:calc((100% - 40px - 45%) / 2);}
	[data-subarea="contact"] .flex > ul.con02 > li:last-child:before            {width: calc(50% + 5px);} 
	[data-subarea="contact"] .flex > ul.con02 > li > ul							{gap:10px;}
	[data-subarea="contact"] .flex > ul.con02 > li > ul:before                   {width: calc(50% + 5px);}
	[data-subarea="contact"] .flex > ul.con02 > li > ul > li                      {width:calc((100% - 10px) / 2);} 
	
}

@media screen and (max-width: 968px) {
	[data-subarea="contact"] .flex                                               {padding:40px;gap: 15px;} 
	[data-subarea="contact"] .flex > ul > li dl dt								{font-size:17px;padding:12px;}
	[data-subarea="contact"] .flex > ul > li dl dt span						{font-size:15px;}
	[data-subarea="contact"] .flex > ul > li dl dd								{font-size:15px;padding:12px;}
}

@media screen and (max-width: 868px) {
	[data-subarea="contact"] .flex                                              	 {gap: 15px;} 
	[data-subarea="contact"] .flex > ul:not(.con02)                               {width:calc((100% - 30px - 45%) / 2);}
}

@media screen and (max-width: 768px) {
	[data-subarea="contact"] .flex                                               {padding:30px;flex-wrap:wrap;gap:2em;} 
	[data-subarea="contact"] .flex > ul:not(.con02)                                 {width:100%;}
	[data-subarea="contact"] .flex > ul.con01                                       {order:2;}
	[data-subarea="contact"] .flex > ul.con02                                       {width:100%;order:1;}
	[data-subarea="contact"] .flex > ul.con03                                       {order:3;}
	[data-subarea="contact"] .flex > ul:not(.con02) > li > dl                        {width:60%; margin:0 auto;}
}

@media screen and (max-width: 668px) {
	[data-subarea="contact"] .flex                                               {padding:25px;gap:1.5em;border-radius:14px;} 
	[data-subarea="contact"] .flex > ul > li + li                                 {margin-top:1.5em;}
	[data-subarea="contact"] .flex > ul > li dl dt								{font-size:16px;padding:10px;border-radius:0 14px 0 0;}
	[data-subarea="contact"] .flex > ul > li dl dt span						{font-size:14px;}
	[data-subarea="contact"] .flex > ul > li dl dd								{font-size:14px;padding:10px;}
	[data-subarea="contact"] .flex > ul.con02 > li > ul							{padding-top:1.5em;}
	[data-subarea="contact"] .flex > ul.con02 > li:nth-child( -n + 5):before   {height:1.5em; }
	[data-subarea="contact"] .flex > ul.con02 > li:last-child				 {padding-top:1.5em}
	[data-subarea="contact"] .flex > ul.con02 > li:last-child dl:before		{height:1.5em;}
	[data-subarea="contact"] .flex > ul.con02 > li > ul > li:before 		 {height: calc(100% + 3em);top: -1.5em;}
	[data-subarea="contact"] .flex > ul.con02 > li dl ,
	[data-subarea="contact"] .flex > ul:not(.con02) > li > dl					{width:100%;max-width:320px;}
}


/************************************************************

					    민방위제도
 
************************************************************/

[data-subarea="civil_defense"] .img_bulet_list>li                               {flex:0 1 100%;align-items:center;}
[data-subarea="civil_defense"] .img_bulet_list>li .img_area                 {width:16em;}

@media screen and (max-width: 1568px) {
    [data-subarea="civil_defense"] .img_bulet_list>li .img_area                 {width:14em;}
}

@media screen and (max-width: 1268px) {
    [data-subarea="civil_defense"] .img_bulet_list>li .img_area                 {width:12em;}
}

@media screen and (max-width: 868px) {
    [data-subarea="civil_defense"] .img_bulet_list>li                           {align-items:flex-start;}
    [data-subarea="civil_defense"] .img_bulet_list>li .img_area                 {width:10em;}
    [data-subarea="civil_defense"] .img_bulet_list>li .cont                   { width: calc(100% - 12em); }
}

@media screen and (max-width: 580px) {
    [data-subarea="civil_defense"] .img_bulet_list>li .img_area                 {width:9em;}
    [data-subarea="civil_defense"] .img_bulet_list>li .cont                   { width: calc(100% - 11em); }
}

@media screen and (max-width: 460px) {
    [data-subarea="civil_defense"] .img_bulet_list>                             {margin-left:20px;}
    [data-subarea="civil_defense"] .img_bulet_list>li .img_area               {width:100%;max-width:180px;margin:0 auto;}
    [data-subarea="civil_defense"] .img_bulet_list>li .cont                   { width: 100%; }
}


/************************************************************

					    시민안전보험
 
************************************************************/
[data-subarea="siminboheom"] .title_img                                 {position:relative;background: url(/images/safe/contents/bg_siminboheom.png) no-repeat right bottom / auto 320px;padding: 70px 80px;background-color:#eff9eb;border-radius:10px;overflow: hidden;transition: var(--trans-ani);}
[data-subarea="siminboheom"] .title_img h4                              {font-size: 1.25em;font-family:var(--font-TheJamsil);font-weight: 400;color:var(--color-base);margin-bottom: 1.375em;line-height: 1.4;position: relative;z-index: 1;}
[data-subarea="siminboheom"] .title_img h4 strong                     {font-size: 2em;font-weight:600;color:var(--color-black1);}
[data-subarea="siminboheom"] .title_img p                                {font-size:1.125em;position: relative;z-index: 1;}
[data-subarea="siminboheom"] .title_img p strong                     {font-weight:600;}

@media screen and (max-width:1468px){
    [data-subarea="siminboheom"] .title_img                             {background-size:auto 280px;}
    [data-subarea="siminboheom"] .title_img h4                          {font-size:1.125em;}
    [data-subarea="siminboheom"] .title_img p                            {font-size:1em; }
}

@media screen and (max-width:1024px){
    [data-subarea="siminboheom"] .title_img                         {padding:60px;background-size:auto 260px;}
}

@media screen and (max-width:868px){
    [data-subarea="siminboheom"] .title_img                             {background-position:right -30% bottom;background-size:auto 250px;}
}

@media screen and (max-width:768px){
	[data-subarea="siminboheom"] .title_img                             {padding: 50px;background-position:right -50% bottom;background-size:auto 240px;}
    [data-subarea="siminboheom"] .title_img::before                     {content:'';display:block;position:absolute;left:0;width: 100%;top:0;height:100%;background: linear-gradient(to right, #eff9eb , transparent);z-index: 1;}
}

@media screen and (max-width:668px){
    [data-subarea="siminboheom"] .title_img                             {padding: 40px;background-position:right -80% bottom;background-size:auto 220px;}
}

@media screen and (max-width:668px){
    [data-subarea="siminboheom"] .title_img                             {background-position:right -80% bottom;background-size:auto 220px;}
}

@media screen and (max-width:568px){
    [data-subarea="siminboheom"] .title_img                             {background-position:right -90% bottom;background-size:auto 200px;}
}
 
@media screen and (max-width:468px){
    [data-subarea="siminboheom"] .title_img                             {padding:35px;background-position: right 180% bottom;background-size: cover;}
    [data-subarea="siminboheom"] .title_img h4                          {font-size:1.063em;}
}

@media screen and (max-width:368px){
	[data-subarea="siminboheom"] .title_img									{background-image:none;}
	[data-subarea="siminboheom"] .title_img::before                     {display:none;}
}