#main-article h1 { font-size: 4.1rem; font-weight: 600; padding: 1rem 0 4rem; margin-bottom: 2.5rem; letter-spacing: -.6px; }
#main-article h2 { font-size: 2.2rem; padding:10px 0 10px 10px; }
#main-article h4 { font-size: 3.4rem; font-weight: 600; letter-spacing: -.2rem; line-height: 4rem; margin-top: 12rem; margin-bottom: 3rem; position: relative; }
#main-article h4::before { content: ''; display: inline-block; width:3.5rem; height: 4rem; margin-right: 1.7rem; background:url('/img/sub/title_style.svg') no-repeat; vertical-align: middle; transform: scaleX(-1); }
#main-article p { margin-bottom: 20px; color: #343434; font-size: var(--normal); font-family: 'Pretendard';}

.cont_top_info { width: 100%; }
.cont_top_info > div { margin-bottom: 5.5rem; }
.cont_top_info > div > img { max-width: 100%; }
.cont_top_info > ul > li { font-size: var(--normal); line-height: 3.5rem; letter-spacing: -.25px; font-family: "Pretendard"; }
.cont_top_info > ul > li.menual { background: #5cc0bb; display: inline-block; padding: 2rem; text-align: center; margin: 0 auto; width: 100%; color: #fefefe; }
.cont_top_info > ul > li.emph { padding: 3.5rem 0; font-weight: bold; }
.cont_top_info > ul > li~li { padding: 2rem 0; }
.cont_top_info > ul > li > h5 { font-size: 3.3rem; color: #185652; padding: 6rem 2rem 2rem; margin-left: 2rem; background: #fff; display: inline-block; }
.cont_top_info > ul > li > div { display:flex; flex-flow:row wrap; justify-content:space-between; column-gap:1rem; border: 1px solid #ddd; padding: 3rem 3rem; margin-top: -3.7rem; }
.cont_top_info > ul > li > div > div { flex: 1 1 40%; max-width: 32rem; width: 100%; }
.cont_top_info > ul > li > div > div { margin-bottom: 4rem; }
.cont_top_info > ul > li > div > div > h6 { font-size:var(--normal); padding:0 0 0.8rem }
.cont_top_info > ul > li > div > div > dl~dl { padding-top: 2rem; }
.cont_top_info > ul > li > div > div > dl dt { font-weight:bold; color: #5cc0bb; font-size: 1.8rem; }
.cont_top_info > ul > li > div > div > dl dd { position:relative; font-size: 1.6rem; line-height: 2.8rem; }
.cont_top_info > ul > li > div > div > dl dd::before { content:''; width:1.5rem; height:1.5rem; display:inline-block; background:#999; border-radius:25px; margin-right: 2rem; vertical-align: middle; }

/* tab */
.accordion { margin: 0 auto; padding: 0 0 2rem 0; }
.accordion-item { padding: 2rem 0; margin: 0; overflow: hidden; border: none; outline: none; border-bottom: 1px solid #000; transition: all 0.2s ease; }
.accordion-item .accordion-title { font-size: var(--normal); cursor: pointer; position: relative; text-align: left; padding:1rem 0; }
.accordion-item .accordion-title::before { content: '+'; margin-right: 16px; margin-top: 1px; font-family: arial; font-weight: normal; width: 5px; display: inline-block; float: right; }
.accordion-item .paragraph { display: block; line-height: 2.2rem; color: #454545; display: none; padding: 5rem 0; }
.accordion-item .paragraph h2 { font-size: 3.4rem; font-weight: bold; padding: 0 0 1.5rem; }
.accordion-item .paragraph dl {  }
.accordion-item .paragraph dl dt { font-size: var(--normal); padding-bottom: 2rem; line-height: var(--normal-height); max-width: 80%; }
.accordion-item .paragraph dl dd { font-size: 1.8rem; line-height: 2.8rem; position: relative; }
.accordion-item .paragraph dl dd::before { content: 'ㆍ'; }
.accordion-item .paragraph img { display: block; margin-top:6.5rem; max-width: 100%; }
.accordion-item.active .paragraph { display: block; }
.accordion-item.active .accordion-title::before { content: '-'; margin-right: 16px; font-family: arial; font-weight: normal; width: 5px; display: inline-block; }


.infographic-container { padding: 25rem 0 20rem; }
.infographic-row { display: flex; justify-content: center;  list-style: none; padding: 0; margin: 0; }
.infographic-col { flex: 0 0 31%; width: 33.3%; text-align: center; position: relative; }
.infographic-fill { height: 26px; color: #ffffff; position: relative; }

.infographic-step { box-sizing: content-box; width: 20px; height: 20px; background: #ffffff; border-radius: 50%; position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%); border:7px solid; box-shadow: 0 0 0 4px #ffffff; line-height: 20px; font-size: 14px; font-weight: bold; }
.blue .infographic-step { border-color: #1e3d5f; color: #1e3d5f; }
.orange .infographic-step { border-color: #de5432; color: #de5432; }
.infographic-step::before { position: absolute; height: 35px; background: black; width: 3px; content: ""; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); }
.infographic-step::after { position:absolute; content: ""; bottom: calc(100% + 42px); width: 9px; height: 9px; background: black; border-radius: 50%; left: 50%; transform: translateX(-50%); }
.blue .infographic-step::before, .blue .infographic-step::after { background: #1e3d5f; }
.infographic-text h2 { font-size:var(--normal); padding: 0 0 1rem; }        
.infographic-text { width: 170%; position: absolute; bottom: 75%; transform: translate(0%,-75%); left: 0%; text-align: left; font-size: 14px; }
.infographic-text ul > li { font-size:1.6rem; }
.orange .infographic-step::before, .orange .infographic-step::after { background: #de5432; }
.infographic-col:nth-child(2n) .infographic-step::before { bottom: auto; top: calc(100% + 7px); }
.infographic-col:nth-child(2n) .infographic-step::after { bottom: auto; top: calc(100% + 42px); }
.infographic-col:nth-child(2n) .infographic-text { bottom: auto; top: 100%; transform: translateY(100%); }
.infographic-col:first-child .infographic-fill::before, .infographic-col:last-child .infographic-fill::after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 9px;
 border-color: transparent transparent transparent #ffffff; left: 0; top: 0; content: ""; }
.infographic-col:last-child .infographic-fill::after { border-color: transparent transparent transparent #1e3d5f; right: -8px; left: auto; }


.blue { background: #1e3d5f; }
.orange { background: #de5432; }

#main-article img { max-width: 100%; }



@property --colorStop { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
#chips { display: grid; place-items: center; position: relative; margin: 12rem auto }
.chipsWrapper { --base-border-color: hsl(0 0% 23%); --active-color: hsl(183 66% 67%); display: grid; grid-auto-flow: column; place-items: center; }
.chip { padding: 0.5rem 2rem; border-radius: 9999px; font-size: 2rem; font-weight: 550; color: var(--color); border: 2px solid var(--border-color); z-index: 1; }
.chip:not(.active) { --color: white; --border-color: var(--base-border-color); background-image: linear-gradient(hsl(0 0% 13%), hsl(0 0% 9%)); }
.chip.active { --color: black; --border-color: var(--active-color); background-color: var(--active-color); box-shadow: 0 0 0.75rem var(--border-color); }

.linkWrapper { --linkHeight: 3px; --linkWidth: 7rem; width: var(--linkWidth); display: grid; place-items: center;
  & > * { grid-area: 1/-1; }
}

.link { width: 100%; height: var(--linkHeight); background-color: var(--base-border-color); background-image: linear-gradient(to right, var(--base-border-color), var(--active-color) var(--colorStop), transparent var(--colorStop));
  animation: colorStopToRIght 2s infinite; }

.switch { --switch-width: 12.5%; width: var(--switch-width); height: calc(var(--linkHeight) + 4px); border-radius: 9999px; background-color: var(--active-color); box-shadow: 0 0 0.5rem var(--active-color); justify-self: start;
  transform: translateX(-100%);  animation: switchToRight 2s infinite; }

@keyframes switchToRight {
  to { transform: translateX(calc(var(--linkWidth) + 100%)); }
}

@keyframes colorStopToRIght {
  to { --colorStop: calc(100% + 12.5%); }
}

#into { position: relative; }
#into::after { width: 52px; height: 4px; background: #185652; margin: 6rem 0; content: ''; display: block; }
.into_cont { width: 100%; justify-content: space-between; font-size: var(--normal); flex-flow: row nowrap; }
.into_cont > div { padding: 2rem 2rem 0 2rem; flex: 1 1 auto; }
.into_cont > div:not(:last-child) { background:#f8f8f8; }
.into_cont > div:last-child { flex: 1 60%; }
.into_cont > div > div { font-size: 3rem; padding: 0 0 1.5rem; font-weight: bold; }
#main-article .into_cont > div > p { font-size: 2.6rem; padding: 1.5rem 0; font-weight: bold;  }
.into_cont > div > ul > li { font-size: 1.8rem; }
.into_cont > div > table.automatic_table,.into_cont > div > table.automatic_table th, .into_cont > div > table.automatic_table td { border: 1px solid #ddd; }
.into_cont > div > table.automatic_table { text-align: center; border-left: 0; border-right: 0; }
.into_cont > div > table.automatic_table td { width: 50px; height: 50px; }
.into_cont > div > table.automatic_table td[colspan='2'] { width:100px; }
.into_cont > div > table.automatic_table td[rowspan='2'] { height:100px; }
.into_cont > div > table.automatic_table th,.into_cont > div > table.automatic_table td { padding: 0.8rem 0; }


#main-article .leader {  }
#main-article .leader > li { position: relative }
#main-article .leader > li:not(:first-child) > div > h4 { letter-spacing: -.05rem; margin-top: 10rem;  margin-bottom: 1.5rem; }
#main-article .leader > li:first-child > div > h4 { letter-spacing: -.05rem; margin-top: 7rem;  margin-bottom: 1.5rem; }
#main-article .leader > li > div > h4::before { display: none; }
#main-article .leader > li > div > h4 span { font-size: 2.4rem; font-weight: 400; color: #185652; }
#main-article .leader > li > div > p { color: #444; }
#main-article .leader > li > div > img { border:1px solid #f8f8f8; max-width: 100%; }
#main-article .leader > li:not(:last-child) > div + div { padding-bottom: 8rem; }
#main-article .leader > li ~ li { border-top: 1px solid #e7e7e7; }


.text_card { display: flex; flex-flow: row wrap; column-gap: 1rem; margin-top: 2rem; }
.text_card > dl { flex: 1 1 31%; position: relative; width: 100%; padding: 2rem; border-radius: 4px; border: 1px solid #ddd; margin-top: 1rem; }
.text_card > dl~dl {  }
.text_card .sub_title { position: relative; font-weight: 600; font-size: 1.6rem; text-transform: uppercase; color: #000; padding-bottom: 1rem; }
.text_card dd { font-size: 1.4rem; color: #7b8591; display: block; }


#chart { width:100%; margin:4rem auto 6rem; }
#canvas canvas { max-width:1520px; width:100%; height: 400px; }

/* table */
.new-table-block { margin: 0 auto 4rem; width: 100%; display: table; border:1px solid #dfdfdf; border-top: 2px solid #000; text-align: center; }
.new-table-block.let { text-align:left; }
.new-table-block .table-block-box { display: table-row; background: #fff; text-align: center; }
.new-table-block .table-block-box:nth-of-type(odd) { background: #fff; }
.new-table-block .table-block-box.tit { background:rgba(233,233,233,0.6); }

.new-table-block .table-block-value { padding: 23px 12px; display: table-cell; vertical-align: middle; border-top:1px solid #dfdfdf; font-size:1.6rem; line-height: 3rem; }
.new-table-block .table-block-value ~ .table-block-value { border-left:1px solid #dfdfdf; }


.new-table-block .table-block-value.dash { position: relative; }
.new-table-block .table-block-value.dash > ul > li:not(:first-child)::before { content: ''; display: inline-block; width:5px; height:1px; vertical-align: middle; background: #888; margin-right:0.5rem; }
.new-table-block .table-block-value > ul.not { padding: 2rem 0; text-align: left; }
.new-table-block .table-block-value li span { display: block; }
.new-table-block .table-block-value li { line-height:3.5rem; }


.location_btn { max-width: 1520px; margin: 5rem auto 3rem; position: relative; }
.location_btn > ul { display: flex; justify-content: center; column-gap:3rem; flex-flow: row wrap; }
.location_btn > ul > li { padding: 2rem 0; }
.location_btn > ul > li > a { text-align: center; border-width: 2px; border-style: solid; border-radius: 5rem; font-size: 1.8rem; font-weight: bold; padding: 1.5rem 3rem; }
.location_btn > ul > li:first-child > a { color: #00c73c; border-color: #00c73c; }
.location_btn > ul > li:last-child > a { color: #FAE100; border-color: #FAE100; }

.location_info { position: relative; margin-top: 5rem; }
.location_info > div { display: flex; justify-content: space-between; align-items: center; column-gap: 3rem; }
/* .location_info::before,.location_info::after { content: ''; display: block; width: 7rem; height: 0.5rem; background: #185652; }
.location_info::before { margin: 0 0 4rem; }
.location_info::after { margin: 4rem 0 0; } */
.location_info > div > ul {  }
.location_info > div > ul.l_i_title { width: 100%; max-width: 25rem; }
.location_info > div > ul.l_i_content { flex: 1 1 40%; }
.location_info > div > ul li { display: block; padding: 1.4rem 0.3rem; text-align: left; font-weight: bold; font-weight: 1.8rem; }
.location_info > div > ul.l_i_content li { font-weight: normal; }
.location_info > div > ul li~li { border-top: 1px solid #ddd; }
.location_info > div > ul.l_i_title li~li { border-color: #222; }

.location_guide { margin-top: 6rem; }
#main-article .location_guide > h2 { font-size: 2.2rem; font-weight: bold; padding-bottom: 2rem; border-bottom: 1px solid #e7e8e9; }
.location_guide > h2 > i { padding-right: 1rem; }
.location_guide > div { display: flex; flex-flow: row wrap; padding-top: 2.5rem; }
.location_guide > div > dl { flex: 1 1 40%; }
.location_guide > div > dl dt { font-weight: bold; font-size: 1.8rem; padding: 0 0 2rem; }
.location_guide > div > dl dd { font-size: 1.6rem; display: flex; }
.location_guide > div > dl dd h6 { font-size: 1.6rem; padding: 0 1rem 0 0; }
.location_guide > div > dl dd h6.metro5_txt { color: #8936e0; }
.location_guide > div > dl dd h6 span.metro5 { background: #8936e0; width: 2.5rem; height: 2.5rem; border-radius: 12.5px; margin-right: 10px; font-weight: 500; font-size: 13px; line-height: 25px; color: #fff; text-align: center; display: inline-block ;}

.location_guide > div > dl.verti dd,.location_guide > div > dl.verti dd h5 { display: block; }
.location_guide > div > dl.verti dd~dd { padding: 1.5rem 0 0; }

.engineer { border: 1px solid #ddd; border-collapse: collapse; border-spacing: 0; margin-bottom: 10px; max-width: 100%; width: 100%; display: flex; width: 100%; justify-content: space-between; }
.engineer > thead > tr > th,
.engineer > thead > tr > td,
.engineer > tbody > tr > th,
.engineer > tbody > tr > td,
.engineer > tfoot > tr > th,
.engineer > tfoot > tr > td { line-height: 20px; padding: 13px; vertical-align: top; text-align: center; }
.engineer tr > td~td,.engineer tr > th~th { border-top: 1px solid #ddd; }

.engineer > thead > tr > th { font-weight: normal; vertical-align: bottom; }
.engineer th { text-align: center; }

.engineer,
.engineer th,
.engineer td,
.engineer tr,
.engineer tr th,
.engineer tr td,
.engineer thead,
.engineer thead th,
.engineer thead td,
.engineer thead tr,
.engineer thead tr th,
.engineer thead tr td,
.engineer tbody,
.engineer tbody th,
.engineer tbody td,
.engineer tbody tr,
.engineer tbody tr th,
.engineer tbody tr td,
.engineer tfoot,
.engineer tfoot th,
.engineer tfoot td,
.engineer tfoot tr,
.engineer tfoot tr th,
.engineer tfoot tr td { display: block; }
.engineer > thead { float: left; width: 21rem; }
.engineer > thead > tr { border-right: 1px solid #ddd; }
.engineer > tbody { display: flex; justify-content: space-between; flex-flow: row nowrap; flex: 1 1 80%; }
.engineer > tbody > tr { display: inline-block; vertical-align: top; width: 100%; }
.engineer > tbody { width: auto; white-space: nowrap; overflow-x: auto; }


.demand { background: #f8f8f8;  }
#main-article .demand_title { font-size: 3.3rem; padding: 2rem; margin: 0; font-weight: bold; }
.demand_cont { margin: 0; position: relative; padding: 2rem 3rem; }
.demand_cont .dc { position: relative; }
.demand_cont .dc~.dc { border-top: 1px solid #ddd; }
.demand_cont .dc:hover .dc_point { -moz-box-shadow: inset 40rem 0 0 0 #5cc0bb; -webkit-box-shadow: inset 40rem 0 0 0 #5cc0bb; box-shadow: inset 40rem 0 0 0 #5cc0bb; }
.demand_cont .dc_info { padding: 2rem 0; position: relative; }
.demand_cont .dc_info strong { font-weight: 700; }
.demand_cont .dc_info p:not(.dc_point) { padding-bottom: 1.2rem; }
.demand_cont .dc_point { display: inline-block; margin-bottom: 1.2rem; padding: 0.25rem 1rem 0.2rem 1rem; color: #fff !important;
    -moz-transition: box-shadow 0.5s ease-in 0.1s; -o-transition: box-shadow 0.5s ease-in 0.1s; -webkit-transition: box-shadow 0.5s ease-in; -webkit-transition-delay: 0.1s; transition: box-shadow 0.5s ease-in 0.1s;
  color: white; font-size: 0.75rem; background-color: black; -webkit-box-shadow: inset 0 0 0 0em #185652; }



@media screen and (max-width: 1300px) { 
    .infographic-text { width: 100%; bottom: 50%; transform: translate(0%, -50%);}
    .infographic-col:nth-child(2n) .infographic-text { bottom: auto; top: 50%; transform: translateY(50%); }
        .into_cont { flex-flow: column wrap; }
    .into_cont > div:not(:last-child) { background: transparent; margin-bottom: 2rem; }
    #main-article .into_cont > div > p { margin: 0; }

}


@media only screen and (max-width: 950px) {
    .new-table-block .table-block-box { text-align: left; }  
.new-table-block { display: block; text-align: left; }    
.new-table-block  .table-block-box { padding: 14px 0 7px; display: block; }
.new-table-block  .table-block-box.tit { padding: 0; height: 6px; display: none; }
.new-table-block  .table-block-box.tit .table-block-value { display: none; }
.new-table-block  .table-block-box .table-block-value { margin-bottom: 10px; }
.new-table-block  .table-block-box .table-block-value:before { content: attr(data-title); margin-top: 10px; min-width: 98px; font-size: 1.4rem; 
    line-height: 10px; font-weight: bold; text-transform: uppercase; color: #969696; display: block; margin-bottom: 3px;}
.new-table-block  .table-block-value { padding: 2px 16px;  display: block; border-top:0; }
.new-table-block  .table-block-box:nth-of-type(odd) { background:#f0f0f0; }
.new-table-block  .table-block-value > ul { display: flex; flex-wrap: wrap; }
.new-table-block  .table-block-value > ul.not { display: block; }
.new-table-block  .table-block-value > ul > li { flex:1 1 40%; }
.new-table-block .table-block-value.dash > ul { display: block; }
.new-table-block .table-block-value ~ .table-block-value { border:0; }
.new-table-block .table-block-value li span { display: inherit; }    
  
 .infographic-container { padding: 5rem 0; }
 .infographic-row { flex-direction: column; box-shadow: none; }
 .infographic-col { flex: 1 1 auto; width: auto; }
 .infographic-text, .infographic-col:nth-child(2n) .infographic-text { top: 50%; bottom: auto; transform: translateY(-50%); left: calc(20%); width: auto; }

 .infographic-fill { height: 200px; width: 26px; }
 .infographic-step::before, .infographic-col:nth-child(2n) .infographic-step::before { bottom: auto; top: 50%; transform: translateY(-50%); width: 35px; height: 3px; left: calc(100% + 7px); }
 .infographic-step::after, .infographic-col:nth-child(2n) .infographic-step::after { bottom: auto; top: 50%; transform: translateY(-50%); left: calc(100% + 42px); }
 .infographic-col:first-child .infographic-fill::before, .infographic-col:last-child .infographic-fill::after { content: none; }
.infographic-step::before, .infographic-col:nth-child(2n) .infographic-step::before { width: 15px; }
.infographic-step::after, .infographic-col:nth-child(2n) .infographic-step::after { left: calc(100% + 22px); }    
.accordion-item .accordion-title span { width: 82.592%; display: block; }    
    

    
    .text_card { flex-direction: column; }    
}
    

@media only screen and (max-width: 500px) {
#main-article h1 { font-size: 3.4rem; font-weight: 600; padding: 0; margin-bottom: 2.5rem; letter-spacing: -.6px; }
#main-article h2 { font-size: 1.8rem; padding:10px 0 10px 10px; }
#main-article h4 { font-size: 2.1rem; font-weight: 600; letter-spacing: -.2rem; line-height: 4rem; margin-top: 8rem; margin-bottom: 1.5rem; position: relative; }
#main-article h4::before { content: ''; display: inline-block; width:2.5rem; height: 3rem; margin-right: 1.3rem; background:url('/img/sub/title_style.svg') no-repeat; vertical-align: middle; transform: scaleX(-1); }
#main-article p { margin-bottom: 20px; color: #343434; font-size: var(--normal); }
    .infographic-text h2 { padding: 0 !important; }
    .infographic-container { padding: 1rem 0; }
    #main-article .leader > li:not(:first-child) > div > h4 { margin-top: 4rem; }
    #main-article .leader > li:not(:last-child) > div + div { padding-bottom: 6rem; }
    .cont_top_info > ul > li.emph { padding: 1.5rem 0; }
    .cont_top_info > ul > li > h5 { font-size: 2rem; }
    .cont_top_info > ul > li > div { column-gap: 2rem; }
    .cont_top_info > ul > li > div > div > h6 { padding: 0; }
    .cont_top_info > ul > li > div > div > dl dt { font-size: 1.6rem; }
    .cont_top_info > ul > li > div > div > dl dd { font-size: 1.4rem; }
    .cont_top_info > ul > li > div > div > dl dd::before { width: 1.1rem; height: 1.1rem; margin-right: 1rem; }
    #main-article .location_guide > h2 { font-size: 1.8rem; }
    .location_guide > div { flex-flow: column wrap; }
    .location_guide > div > dl.verti { margin: 3rem 0 0; }
    .location_guide > div > dl dt { padding: 0 0 1.1rem; }
    .location_guide > div > dl.verti dd h6 { color: #777; }
    
}