@charset "utf-8";

#sub .container {max-width: 1200px;box-sizing: border-box;width: 100%;margin: 0 auto;}
.title_wrap {width: 250px;height: 195px;margin: 0 auto;text-align: center;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;position: relative;z-index: -1;}
.title_wrap h2 {color: #fff;text-align: center;font-size: 42px;border-bottom: 3px solid #fff;display: inline-block;transform: translateY(100%);}
.title_wrap .line2 {font-size: 34px;transform: translateY(45%);}
.title_wrap.special {background: #544e9e;}
.title_wrap.cat1 {background: #62bb47;}
.title_wrap.cat2 {background: #f68c62;}
.title_wrap.cat3 {background: #9f75b4;}
.fontSizeControl {max-width: 1200px;margin: 0 auto;display: flex;justify-content: right;align-items: center;margin-bottom: 15px;}
.sizeLevelBtn {padding: 10px;font-size: 1em;}
.fontBtn {font-size: 1rem;width:1.8em;height:1.8em;border:1px solid #aaa;box-sizing: border-box;outline: 0px;border-radius: 1.8em;margin: 0 10px;cursor: pointer;transition: all 0.1s;padding-bottom: 0.2em;}
.plusBtn {background: #eee url(/common/images/icon/plusBtn.png) no-repeat center;}
.minusBtn {background: #eee url(/common/images/icon/minusBtn.png) no-repeat center;}
.fontBtn:hover {background-color: #bbb;}
.fontSizeNomal {cursor: pointer;}

/* common */
.fwb {font-weight: 500;}
.fsi {font-style: italic;}
.tac {text-align: center;}
.label {color: #fff;display: inline-block;background: #000;padding: 8px 15px 5px;line-height: 1;border-radius: 15px;background: #4b7abd;}
.ico {margin-right: 7px;}
.red {color: #d73334;}
.blue {color: #46b3df;}
.tdu {text-decoration: underline;}

/* 컨텐츠 */
.contents {border-top: 1px solid #ddd;}
.contents .title {text-align: center;margin: 50px 0;}
.contents .title h3 {font-size: 2.8em;color: #262626;}
.contents .title h3 strong {display: block;font-weight: 300;font-size: 0.6em;margin-top: 10px;}
.contents hr {border-style: dashed;color: #a3a3a3;width: 99%;}
.column h4 {font-weight: 500;font-size: 1.6em;}
.full > h4 {font-weight: 500;font-size: 1.2em;margin-bottom: 10px;}
.half > h4 {font-weight: 500;font-size: 1.2em;margin-bottom: 10px;}
.one-third h4 {font-weight: 500;font-size: 1.2em;}
.row.box {width: 80%;margin: 0 auto 30px;border: 1px solid #000;padding: 30px;box-shadow: 7px 7px 0px #46b3df;}

/* 다음기사보기 */
.sub_common {display: flex;justify-content: space-between;padding-bottom: 50px;border-top: 1px solid #ddd;max-width: 1400px;margin: 80px auto 0;}
.sub_common .button_wrap {margin-top: 40px;}
.sub_common .button_wrap button {width: 100px;text-align: center;padding: 10px 0;background: none;border: none;display: inline-block;position: relative;transition: all 0.4s;}
.sub_common .button_wrap button a {font-size: 18px;color: #666;width: 100%;height: 100%;display: block;}
.sub_common .button_wrap button:before,
.sub_common .button_wrap button:after {position: absolute;content: '';z-index: 1;transition: all 0.4s;}
.sub_common .button_wrap button:hover a {color: #004ea2;font-weight: 700;}
.sub_common .button_wrap span {font-size: 20px;color: #ddd;font-weight: normal;cursor: default;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.sub_common .button_wrap .prev_btn {transition: left, color 0.4s;}
.sub_common .button_wrap .prev_btn::after {position: absolute;content: '';transform: rotate(45deg);border-left: 2px solid #666;border-bottom: 2px solid #666;width: 8px;height: 8px;left: 2px;top: 17px;}
.sub_common .button_wrap .prev_btn::before {position: absolute;content: '';border-top: 2px solid #666;width: 16px;height: 8px;left: 2px;top: 21px;}
.sub_common .button_wrap .prev_btn:hover::after,
.sub_common .button_wrap .prev_btn:hover::before {left: -2px;border-color: #004ea2;}
.sub_common .button_wrap .next_btn::after {transform: rotate(45deg);border-right: 2px solid #666;border-top: 2px solid #666;width: 8px;height: 8px;right: 2px;top: 17px;}
.sub_common .button_wrap .next_btn::before {border-top: 2px solid #666;width: 16px;height: 8px;right: 2px;top: 21px;transition: all 0.4s;}
.sub_common .button_wrap .next_btn:hover::after,
.sub_common .button_wrap .next_btn:hover::before {right: -2px;border-color: #004ea2;}
.sub_common .sub_sns_wrap {margin-top: 54px;}
.sub_common .sub_sns_wrap li {display: flex;float: left;margin-right: 10px;box-sizing: border-box;}
.sub_common .sub_sns_wrap li:last-child {margin-right: 0px;}
.sub_common .sub_sns_wrap li a {cursor: pointer;width: 100%;height: 100%;transition: all 0.4s;}
.sub_common .sub_sns_wrap li a:hover {color: #004ea2;}
.row .btn_link {display: inline-block;padding: 12px 40px 12px 25px;background: #e5e5e5;color: #000;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative;-webkit-transition-property: color;
  transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;font-weight: 400;}
.row .btn_link::after {position: absolute;content: "";display: block;width: 65px;height: 65px;background: transparent url(../img/common/link_click.png) no-repeat center/contain;transform: rotate(-25deg);right: -20px;bottom: -20px;}
.row .btn_link:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #004ea2;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.row .btn_link:hover:before, .btn_link:focus:before, .btn_link:active:before {-webkit-transform: scaleX(1);transform: scaleX(1);}
.row .btn_link:hover, .row .btn_link:active, .row .btn_link:focus {color: #fff;}

/* table */
.tableStyle {width: 100%;overflow: hidden;overflow-x: auto;position: relative;}
.tableStyle .tableCover {opacity: 0;width: 100%;height: 100%;position: absolute;visibility: hidden;background-color: rgba(0, 0, 0, 0.5);top: 0px;left: 0px;transition: all 0.1s;}
.tableStyle .tableCover p {width: 100%;word-break: keep-all;color: white;box-sizing: border-box;padding: 9px;text-align: center;font-size: 0.95em;font-weight: 600;}
.tableStyle table {width: 100%;min-width: 600px;margin-bottom: 10px;}
.tableStyle table tr th,
.tableStyle table tr td {border: 1px solid black;padding: 8px 12px;font-size: 0.9em;}
.tableStyle table thead th {background-color: #f05972;color: #fff;}
.tableStyle table tbody th {background-color: #f7c8d5;}
.tableStyle table th {font-weight: 500;}
.row p {font-size: 1.05em;line-height: 1.8;}
.row a {color: #12aeed;}
.row .small {font-size: 0.85em;display: block;display: inline-block;line-height: 1.5;}
.row a:hover, .row a:active {color: #f50406;}
.contents .row.noflex {display: inherit;}
.row .caption {font-size: 1em;text-align: center;padding-top: 12px;line-height: 1.2;}
.row > .caption {font-size: 1em;text-align: center;padding-top: 12px;line-height: 1.2;}
.row .writer {text-align: right;font-size: 1em;}
.row .table_tit {font-weight: 500;font-size: 1.6em;}
.round_tit {border-radius: 25px;padding: 5px 20px;font-size: 1.6em;color: #fff;background: #ddd;display: inline-block;}
.column h4 .round_tit {border-radius: 25px;padding: 5px 20px;font-size: 1em;color: #fff;background: #ddd;display: inline-block;}
.column h4 .table_tit {font-weight: 500;font-size: 1.2em;}
.tableStyle table .gray_th {background: #c5cecd;color: #000;}
.tableStyle table .kaki_th {background: #d1d3bb;color: #000;}
.tableStyle table .blue_th {background: #005092;color: #fff;}
.tableStyle table .purple_th {background: #665fa1;color: #fff;}
.tableStyle table .blue10_th {background: #4b7abd;color: #fff;}
.tableStyle table .cyan_th {background: #31bdb9;color: #fff;}
.tableStyle table .pink_th {background: #f05972;color: #fff;}
.tableStyle table .gray50_th {background: #425761;color: #fff;}
.tableStyle table .orange_th {background: #f16a62;}
.tableStyle table .gray {background: #e6e7e9;}
.tableStyle table .pink {background: #f8abad;color: #000;}
.tableStyle table .orange {background: #feeee9;}
.tableStyle table .mint {background: #46bfa5;}
.tableStyle table .red {color: red;}

.profile h4 {margin-top: 20px;}
.profile p {margin-top: 10px;line-height: 1.4;}

.parlist ul::after {content: '';clear: both;display: block;}
.parlist ul li {float: left;width: 16%;box-sizing: border-box;margin: 0 0.333333333333335% 10px;font-size: 0.9vw;}
.parlist ul li .fwb {font-size: 1vw;}
.parlist ul li:nth-child(9n) {margin-right: 0;}

/* 생활정보 */
.info {padding: 50px 0 0;}
.info .row h3 {font-size: 1.8em;}
.info .row h4.box {font-size: 1.5em;display: block;color: #000;padding: 5px 25px;background: linear-gradient(-135deg, transparent 10px, #7ee7cf 0);width: 60%;}
.info .row h4.box.pink {background: linear-gradient(-135deg, transparent 10px, #fcd2cd 0);}
.info .row h4.box.orange {background: linear-gradient(-135deg, transparent 10px, #fcd2b9 0);}
.info .row h4.box.sky {background: linear-gradient(-135deg, transparent 10px, #95bdc9 0);}
.info .row h4.box.purple {background: linear-gradient(-135deg, transparent 10px, #94a6d3 0);}

/* grid */
.contents .row {display: flex;justify-content: space-evenly;}
.contents .row.txt {display: block;margin-bottom: 20px;}
.column.half {width: calc(50% - 60px);}
.column.one-third {width: calc(34.3% - 60px);}
.column.one4 {width: calc(26.5% - 60px);}
.contwrap::after,
.row::after {clear: both;}
.row {margin-bottom: 30px;}
.contwrap {margin-bottom: 40px;}

@media (max-width: 1400px) {
  #sub .container {padding: 0 15px;}
  .sub_common {padding: 0 15px;}
}

@media (max-width: 768px) {
  #sub {padding-top: 100px;}
  .contents .title {margin: 40px auto 20px;}
  .contwrap {padding-top: 20px;}
  .row.one4 {flex-wrap: wrap;gap: 30px;}
  .column.one4 {width: calc(50% - 60px);}
  .btn_link {color: #fff;background: #004ea2;}
  .sub_common {margin: 40px auto 30px;}
  .column.one-third {width: calc(34.3% - 25px);}
  .info .row h4.box {width: 100%;}
}

@media screen and (max-width: 600px) {
  #sub {padding-top: 70px;}
  .parlist ul::after {content: '';clear: both;display: block;}
  .parlist ul li {float: left;width: 32%;margin: 0.5%;box-sizing: border-box;font-size: 12px;margin-bottom: 20px;display: inline-block;min-height: 220px;}
  .parlist ul li .fwb {font-size: 15px;}
  .parlist ul li:nth-child(9n) {margin-right: 0;}

}

@media (max-width: 475px) {
  .title_wrap {width: 45%;height: 130px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
  .title_wrap h2 {font-size: 28px;}
  .title_wrap .line2 {font-size: 23px;}
  .fontSizeControl {margin: 10px 0;}
  .contents .title h3 {font-size: 1.5em;}
	.contents .title h3 strong {font-size: 0.75em;}
  .contents .title {margin: 30px auto 10px;}
  .row {margin-bottom: 20px;}
  .contents .row {flex-direction: column;gap: 20px;}
  .column.half, .column.one-third, .column.one4 {width: 100%;}
  .row .caption {font-size: 0.9em;padding-top: 8px;}
  .row > .caption {font-size: 0.9em;padding-top: 0;}
  .row p {font-size: 1em;/* text-align: justify; */}
  .tableStyle .tableCover {opacity: 1;visibility: visible;}
  .tableStyle .tableCover p {transform: translateY(45%);height: 100%;}
  .row .writer {font-size: 0.9em;}
  .sub_common {flex-wrap: wrap;justify-content: center;}
  .sub_common .sub_link {order: 1;}
  .sub_common .sub_sns_wrap {margin-top: 45px;}
  .aic {align-items: center;margin: 40px 0 50px;}
  .sub_common .button_wrap {margin-top: 20px;}
  .row .table_tit {text-align: left;font-size: 1.2em;}
  .column h4 .round_tit {margin-bottom: 10px;}
  .column h4 .table_tit {font-size: 1em;}
  
  .column h4 {font-size: 1.2em;}
  .round_tit {font-size: 1.3em;margin-bottom: 20px;}
  .contents .row.txt {margin-bottom: 10px;}
  .contwrap {margin-bottom: 30px;}
  .row.box {width: 95%;}
  .info .row h3 {font-size: 1.5em;}
  .info .row h4.box {font-size: 1.2em;padding: 5px 15px}
	.tableStyle {margin-bottom: 5px;}
}

@media (max-width: 320px) {
  .contents .title h3 {font-size: 1.2em;}
  .row p, .row .caption, .btn_link, .tableStyle .tableCover p, .fontSizeControl {font-size: 0.85em;}
  .fontBtn {width: 1.2em;height: 1.2em;}
}