@charset "utf-8";

#header {box-shadow: -5px -1px 20px 3px #393939;z-index: 10;}
#tab_list {position: relative;background: #fcb138;padding: 50px 0;box-shadow: inset 0px 3px 3px 0 #5f5f5f;}
#tab_list .tab_list {position: relative;transform: none;margin: 0 auto;left: auto;}
#tab_list .tab_list li {box-shadow: none;}

#sub {background: #f4f3f1;}
#sub .container {max-width: 1280px;box-sizing: border-box;width: 100%;margin: 0 auto;border-top: 5px solid #e9536b;}
.title_wrap {width: 330px;height: 150px;margin: 0 auto 50px;text-align: center;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;position: relative;}
.title_wrap h2 {color: #fff;text-align: center;font-size: 42px;display: inline-block;transform: translateY(50%);top: 50%;position: absolute;transform: translate(-50%, -50%);left: 50%;width: 90%;}
.title_wrap .line2 {font-size: 34px;transform: translateY(45%);}
.title_wrap.special {background: #751485;}
.title_wrap.cat1 {background: #f26521;}
.title_wrap.cat2 {background: #f26521;}
.title_wrap.cat3 {background: #f29700;}
.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: #ffffff url(/common/images/icon/plusBtn.png) no-repeat center;}
.minusBtn {background: #ffffff url(/common/images/icon/minusBtn.png) no-repeat center;}
.fontBtn:hover {background-color: #bbb;}
.fontSizeNomal {cursor: pointer;}

/* common */
.fwb {font-weight: 500;}
.fwb.w{padding:2px 39px;}
.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;}
.ico_tit {margin-right: 7px;}
.ico_after {vertical-align: top;}
.red {color: #d73334;}
.blue {color: #46b3df;}
.tdu {text-decoration: underline;}
.imgwrap {margin: auto;}

/* 컨텐츠 */
.contents {background: #fff;overflow: hidden;}
.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 #57b5e6;}
.row.boxg {width: 80%;margin: 0 auto 30px;border: 1px solid #4db847;padding: 30px;box-shadow: 7px 7px 0px #4db847;}
.row.boxm {width: 80%;margin: 0 auto 30px;border: 1px solid #4ebe94;padding: 30px;box-shadow: 7px 7px 0px #4ebe94;}

/* 다음기사보기 */
.sub_common {padding: 15px;margin: 0 auto;max-width: 900px;}
.sub_common .button_wrap {display: flex;justify-content: center;gap: 20px;align-items: center;}
.sub_common .button_wrap button {width: 30%;text-align: center;padding: 10px 0;background: none;border: none;display: inline-block;position: relative;transition: all 0.4s;padding: 20px;}
.sub_common .button_wrap button a {font-size: 22px;width: 100%;height: 100%;display: block;/* color: #fff; */font-weight: 600;}
.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: #f18020;font-weight: 700;}
.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 #333;border-bottom: 2px solid #333;width: 8px;height: 8px;left: 10%;top: 44%;}
.sub_common .button_wrap .prev_btn::before {position: absolute;content: '';border-top: 2px solid #333;width: 16px;height: 8px;left: 10%;top: 50%;}
.sub_common .button_wrap .prev_btn:hover::after,
.sub_common .button_wrap .prev_btn:hover::before {left: 6%;border-color: #f18020;}
.sub_common .button_wrap .next_btn::after {transform: rotate(45deg);border-right: 2px solid #333;border-top: 2px solid #333;width: 8px;height: 8px;right: 10%;top: 44%;}
.sub_common .button_wrap .next_btn::before {border-top: 2px solid #333;width: 16px;height: 8px;right: 10%;top: 50%;transition: all 0.4s;}
.sub_common .button_wrap .next_btn:hover::after,
.sub_common .button_wrap .next_btn:hover::before {right: 6%;border-color: #f18020;}
.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, #bce2d7 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, #c0daef 0);}
.info .row h4.box.purple {background: linear-gradient(-135deg, transparent 10px, #c79dbd 0);}
.info .row h4.box.blue {background: linear-gradient(-135deg, transparent 10px, #9bb5dd 0);}
.info .row h4.box.coral {background: linear-gradient(-135deg, transparent 10px, #f2acb0 0);}
.info .row h4.box.purple.w64 {width: 64%;}

/* grid */
.contents .row {display: flex;justify-content: space-evenly;}
.contents .row.mb0 {margin-bottom: 0;}
.contents .row.txt.mb0 {margin-bottom: 0;}
.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);}
.column.one5 {width: calc(20% - 20px);}
.column.one5.mm{border-bottom: 1px solid #000;padding-bottom: 10px;text-align: left;}
.column.one4.mm{border-bottom: 1px solid #000;padding-bottom: 10px;text-align: left;}

.contwrap::after,
.row::after {clear: both;}
.row {margin-bottom: 30px;}
.contwrap {margin-bottom: 40px;}

.nanum strong {font-size: 28px;}
.nanum strong .small {font-size: 20px;}
.nanum .txt {text-align: center;line-height: 1.2;margin: 20px 0;font-weight: 500;color: #939598;}
.nanum .tit {font-size: 23px;line-height: 1.2;margin: 20px 0;font-weight: 600;}
.nanum .tit span {text-align: right;display: block;font-size: 20px;}
.nanum .q span {line-height: 1.4;display: inline-block;}

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

@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);}
  .column.one5 {width: calc(50% - 60px);}
  .column.one4.mm, .column.one5.mm{text-align: center;}
  .btn_link {color: #fff;background: #004ea2;}
  .column.one-third {width: calc(34.3% - 25px);}
  .info .row h4.box {width: 100%;}
  .info .row h4.box.purple.w64 {width: 100%;}
	.ico_tit {margin-right: 0;display: block;margin: 0 auto 20px;}
}

@media screen and (max-width: 600px) {
  #sub {padding-top: 70px;}
  .column.one4.mm, .column.one5.mm{text-align: center;}
}

@media (max-width: 475px) {
  .title_wrap {width: 60%;height: 130px;}
  .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, .column.one5 {width: 100%;}
  .column.one4.mm, .column.one5.mm{text-align: center;}
  .row .caption {font-size: 0.9em;padding-top: 8px;}
  .row > .caption {font-size: 0.9em;}
  .row p {font-size: 1em;}
  .tableStyle .tableCover {opacity: 1;visibility: visible;}
  .tableStyle .tableCover p {transform: translateY(45%);height: 100%;}
  .row .writer {font-size: 0.9em;}
  .sub_common {padding: 0 20px;}
  .sub_common .sub_link {order: 1;}
  .sub_common .sub_sns_wrap {margin-top: 45px;}
  .aic {align-items: center;margin: 40px 0 50px;}
  .row .table_tit {text-align: left;font-size: 1.2em;}
  .ico {margin-right: 0;display: block;margin: 0 auto 10px;}
  .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;}
  .ico.block {display: block;margin: 0 auto 5px;}
  .sub_common .button_wrap {gap: 0;}
  .sub_common .button_wrap button {width: 100%;}
  .sub_common .button_wrap button a {font-size: 20px;}
}

@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;}
}