@charset "utf-8";

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

    공통

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

.sub {margin-top:60px; width:100%; min-height:100vh;}

/* .sub::-webkit-scrollbar {background:none;}
.sub::-webkit-scrollbar-thumb {}
.sub::-webkit-scrollbar-track {} */

.sub_ft {margin-top:100px;}
.top_nav {border-bottom:1px solid #aaa;}
/* .top_nav::after {display:block; position:relative; content: ""; width:1280px; height:1px; background:#000; top:70px; left:0;} */
.nav_div {position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background:white; z-index: 1000; }
.breadcrumb-nav{margin-top: 70px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6;}

.fw100 {font-weight:100 !important;}
.fw200 {font-weight:200 !important;}
.fw300 {font-weight:300 !important;}
.fw400 {font-weight:400 !important;}
.fw500 {font-weight:500 !important;}
.fw600 {font-weight:600 !important;}
.fw700 {font-weight:700 !important;}
.fw800 {font-weight:800 !important;}
.fw900 {font-weight:900 !important;}

/* title */
.tit_div {display:flex; align-items:center; justify-content:space-between;}
.tit_txt {display:flex; align-items:center; margin-top:70px; margin-bottom:30px;}
.tit_txt div {width:26px; margin-right:15px;}
.tit_txt div img {width:100%;}
.tit_txt h2 {font-size:26px; font-weight:600; color:#000; text-align:left; white-space: normal;}

.com-title-01 {font-size: 40px; font-weight: 800; text-align: center; margin-bottom: 50px;}


/* tab */
.com-tab-list-01 {display: flex; flex-wrap: wrap; color:#555; background-color:#f9f9f9; border: 1px solid #6e6e6e47; font-weight: 500; margin-bottom: 37px; font-size: 18px;}
.com-tab-list-01 a {display: block; padding: 20px 30px;}
.com-tab-list-01 a.active {background-color:#004286; color: #fff;}
.com-tab-list-01 a:not(.active):where(:hover,:focus) {background-color: #e8e8e8;}

.com-tab-list-02 {display: grid; background-color: var(--bg--bg-content_01); font-size: 18px; color: var(--contents--text-color555); text-align: center; font-weight: 600; margin-bottom: 70px; border: 1px solid var(--border--table-td); border-bottom: none; position: relative;}
.com-tab-list-02::before {content: ""; width: 100%; height: 1px; background-color: var(--border--table-td); position: absolute; bottom: 0; left: 0;}
.com-tab-list-02 li {border-right: 1px solid var(--border--table-td); border-bottom: 1px solid var(--border--table-td);}
.com-tab-list-02 a {display: flex; justify-content: center; align-items: center; background-color: var(--bg--bg-primary); padding: 10px; min-height: 55px; height: 100%; word-break: break-all;}
.com-tab-list-02 a:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-tab-list-02 a:not(.active):where(:hover,:focus) {background-color: #000;}
.com-tab-list-02 a.active {background-color: var(--btn--btn-color02); color: var(--white);}
.com-tab-list-02.col-5 {grid-template-columns: repeat(5,minmax(0,1fr));}
.com-tab-list-02.col-5 li:nth-of-type(5n) {border-right: none;}
.com-tab-list-02.col-4 {grid-template-columns: repeat(4,minmax(0,1fr));}
.com-tab-list-02.col-4 li:nth-of-type(4n) {border-right: none;}
.com-tab-list-02.col-3 {grid-template-columns: repeat(3,minmax(0,1fr));}
.com-tab-list-02.col-3 li:nth-of-type(3n) {border-right: none;}

.com-tab-list-03 {display: grid; color: var(--contents--tab-default); font-size: 17px; font-weight: 500; border: 1px solid var(--border--content-box); background-color: var(--bg--list-box-bg); padding: 25px 30px; gap: 25px 15px; margin-bottom:20px; word-break: break-all;}
.com-tab-list-03 a {width: fit-content; display: block; padding-left: 13px; transition: none; position: relative;}
.com-tab-list-03 a::before {content: ""; width: 3px; height: 3px; background-color: var(--contents--text-color555); border-radius: 50%; position: absolute; top: 8px; left: 0;}
.com-tab-list-03 a.active {color: var(--contents--primary); font-weight: 800; text-decoration: underline; text-underline-position: under;}
.com-tab-list-03 a.active::before {background-color: var(--contents--primary);}
.com-tab-list-03 a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
.com-tab-list-03.col-6 {grid-template-columns: repeat(6, minmax(0,1fr));}
.com-tab-list-03.col-space-between {display: flex; justify-content: space-between; gap: 10px 20px;}

.com-tab-list-04 {display: flex; flex-wrap: wrap; gap: 8px 15px; justify-content: center; font-weight: 500; font-size: 18px; margin-bottom: 40px;}
.com-tab-list-04 > li {}
.com-tab-list-04 a {width: 220px; min-height: 60px; height: 100%; display: flex; justify-content: center; align-items: center; padding: 10px; border: 1px solid #ddd; color:#888; text-align: center; background-color: #fff;}
html[data-mode="dark"] .com-tab-list-04 a {border-color:#004386; background-color:#004386;}
.com-tab-list-04 a.active {background-color:#004386; color: #fff; border: none;}
html[data-mode="dark"] .com-tab-list-04 a.active {background-color:#004386;}
.com-tab-list-04 a:not(.active):where(:hover,:focus) {filter: brightness(0.9);}

.com-tab-list-05 {display: flex; flex-wrap: wrap; justify-content: center; font-size: 17px; font-weight: 600; color:#555; border-bottom: 1px solid #6e6e6e47; gap: 0 85px; margin-bottom: 50px;}
.com-tab-list-05 a {display: flex; height: 100%; justify-content: center; align-items: center; padding: 15px; position: relative;}
.com-tab-list-05 a::before {content: ""; display: none; width: 100%; height: 5px; background-color: #004386; position: absolute; left: 0; bottom: 0;}
.com-tab-list-05 a.active {color: var(--contents--tab-active);}
.com-tab-list-05 a.active::before {display: block;}
.com-tab-list-05 a:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-tab-list-05 a:not(.active):where(:hover,:focus) {background-color: #222;}
.com-tab-list-05.type-02 {gap: 0 20px;}

.com-tab-list-06 {display: flex; border-top: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 18px; font-weight: 500; margin-bottom: 30px;}
.com-tab-list-06 li {width: 100%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.com-tab-list-06 a {height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; padding: 15px 10px;}
.com-tab-list-06 a:not(.active) {background-color:#fff; color:#555;}
.com-tab-list-06 a.active {color:#fff; background-color: #888;}
html[data-mode="dark"] .com-tab-list-06 a.active {background-color: #212223;}
.com-tab-list-06 a:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-tab-list-06 a:not(.active):where(:hover,:focus) {background-color: #000;}

.com-tab-list-07 {display: flex; border-top: 1px solid var(--border--table-td); border-left: 1px solid var(--border--table-td); font-weight: 500; margin-bottom: 45px; font-size: 18px;}
.com-tab-list-07 li {width: 100%; border-right: 1px solid var(--border--table-td); border-bottom: 1px solid var(--border--table-td);}
.com-tab-list-07 a {height: 100%; min-height: 63px; display: flex; justify-content: center; align-items: center; background-color: var(--bg--bg-primary); color: var(--contents--text-color555); text-align: center; padding: 10px;}
.com-tab-list-07 a.active {color: var(--white); background-color: var(--btn--btn-color02);}
.com-tab-list-07 a:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-tab-list-07 a:not(.active):where(:hover,:focus) {background-color: #000;}

.com-tab-list-08 {display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-left: 1px solid var(--border--content-box); border-top: 1px solid var(--border--content-box); font-size: 18px; font-weight: 400; text-align: center; margin-bottom: 30px;}
.com-tab-list-08 li {border-right: 1px solid var(--border--content-box); border-bottom: 1px solid var(--border--content-box);}
.com-tab-list-08 a {height: 100%; display: flex; justify-content: center; align-items: center; padding: 15px 10px;}
.com-tab-list-08 a.active {color: var(--white); background-color: var(--contents--tab-active);}
html[data-mode="dark"] .com-tab-list-08 a.active {background-color: #212223;}
.com-tab-list-08 a:not(.active) {background-color: var(--bg--bg-primary); color: var(--contents--tab-default);}
.com-tab-list-08 a:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] .com-tab-list-08 a:not(.active):where(:hover,:focus) {background-color: #000;}

.com-tab-list-09 {display: flex; justify-content: center; flex-wrap: wrap; font-size: 21px; gap: 5px 30px; color: #000; margin-bottom: 40px;}
.com-tab-list-09 a {padding: 7px; display: block; position: relative;}
.com-tab-list-09 a::before {content: ""; display: none; width: 100%; height: 3px; background-color:#004386; position: absolute; top: 0; left: 0;}
.com-tab-list-09 a:not(.active) {color: #888;}
.com-tab-list-09 a:not(.active):where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
.com-tab-list-09 a.active {font-weight: 600; color: var(--contents--tab-active);}
.com-tab-list-09 a.active::before {display: block;}

.com-tab-list-10 {display: flex; color:#555; border-top: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 60px;}
.com-tab-list-10 li {width: 100%; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.com-tab-list-10 a {height: 100%; min-height: 63px; padding: 10px; background-color:#fff; display: flex; justify-content: center; align-items: center;}
.com-tab-list-10 a.active {background-color:#004386; color:#fff;}
.com-tab-list-10 a:not(.active):where(:hover,:focus) {filter: brightness(0.9);}

/* BOX */
.com-box-01 {margin-bottom: 50px; width: 100%;}

/* 색상 */
p.col01 {color:#0047FF;}
p.col02 {color:#00C73C;}
p.col03 {color:#FF6B00;}
p.col04 {color:#C70000;}

.bgFC {background:#fcfcfc;}
.ta-left {text-align:left;}

/* SHAPE TEXT */
.com-with-shape-01 {text-align: left; font-size: 16px; line-height: 1.5;}
.com-with-shape-01 .com-with-shape-01 {margin-top: 4px; color: var(--contents--text-color555);}
.com-with-shape-01 .com-with-shape-01.circle {font-weight: 500;}
.com-with-shape-01 .com-with-shape-01.circle > li::before {background-color: var(--contents--text-color555);}
.com-with-shape-01 .com-with-shape-01.normal {padding-left: 12px; color: var(--contents--text-color555); font-weight: 400;}
.com-with-shape-01 .com-list-02 {margin-top: 4px; font-size: 15px;}
.com-with-shape-01 .com-list-04 {font-size: 15px;}
.com-with-shape-01 > li {position: relative; white-space: normal;}
.com-with-shape-01 > li.no-shape {padding-left: 0 !important;}
.com-with-shape-01 > li.no-shape::before {display: none;}
.com-with-shape-01 > li:not(:last-of-type) {margin-bottom: 5px;}
.com-with-shape-01 .txt-add-01 {font-size: 15px; color: var(--contents--text-color888); padding-left: 10px; font-weight: 400;}
.com-with-shape-01 .txt-add-01 i {color: #0069D1; font-weight: 800; font-size: 14px;}
.com-with-shape-01 .txt-add-01.no-pdl {padding-left: 0; white-space: normal;}
.com-with-shape-01 .com-tbl-wrap {margin-top: 15px;}

.com-with-shape-01.no-pdl {padding-left: 0 !important;}
.com-with-shape-01.gap-long-01 > li:not(:last-of-type) {margin-bottom: 30px;}
.com-with-shape-01.circle {font-weight: 500;}
.com-with-shape-01.circle > li {padding-left: 12px;}
.com-with-shape-01.circle > li::before {content: ""; width: 3px; height: 3px; background-color: var(--contents--primary); border-radius: 50%; position: absolute; top: 10px; left: 0;}
.com-with-shape-01.dash {color: var(--contents--text-color555); font-weight: 400;}
.com-with-shape-01.dash > li {padding-left: 12px;}
.com-with-shape-01.dash > li::before {content: ""; width: 5px; height: 1px; background-color: var(--contents--text-color555); position: absolute; top: 11px; left: 0; }
.com-with-shape-01.normal {font-weight: 500;}

.com-with-shape-01 .com-tbl-wrap {margin-top: 15px;}

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

@media screen and (max-width: 1280px) { 
    .com-title-01 {font-size: 30px; margin-bottom: 50px;}

    .com-tab-list-01 {font-size: 15px;}
    .com-tab-list-01 a {padding: 15px 25px;}

    .com-tab-list-02 {font-size: 16px; margin-bottom: 60px;}
    .com-tab-list-02 a {min-height: 50px;}

    .com-tab-list-03 {font-size: 15px; padding: 20px; gap: 15px;}
    .com-tab-list-03 a {padding-left: 10px;}
    .com-tab-list-03.col-6 {grid-template-columns: repeat(4, minmax(0,1fr));}
    .com-tab-list-03 a::before {top: 7px;}

    .com-tab-list-04 {font-size: 16px; gap: 5px 10px; margin-bottom: 20px;}
    .com-tab-list-04 a {width: 180px; min-height: 50px;}

    .com-tab-list-05 {font-size: 15px; gap: 0 20px; margin-bottom: 30px;}
    .com-tab-list-05 a {padding: 12px 15px;}
    .com-tab-list-05 a::before {height: 3px;}
    .com-tab-list-05.type-02 {gap: 0 10px;}

    .com-tab-list-06 {font-size: 14px; margin-bottom: 20px;}
    .com-tab-list-06 a {padding: 12px 10px;}

    .com-tab-list-07 {font-size: 17px;}
    .com-tab-list-07 a {min-height: 50px;}

    .com-tab-list-08 {font-size: 16px;}
    .com-tab-list-08 a {padding: 12px 10px;}

    .com-tab-list-09 {font-size: 18px; gap: 5px 20px;}

    .com-tab-list-10 {font-size: 16px; margin-bottom: 40px;}
    .com-tab-list-10 a {min-height: 50px;}

    .com-with-shape-01 {font-size: 14px;}
    .com-with-shape-01 .txt-add-01 {font-size: 13px;}
    .com-with-shape-01 .txt-add-01 i {font-size: 12px;}
    .com-with-shape-01 .com-list-02 {font-size: 13px;}
    .com-with-shape-01 .com-with-shape-01.normal {padding-left: 10px;}
    .com-with-shape-01 .com-list-04 {font-size: 14px;}

    .com-with-shape-01.circle > li {padding-left: 10px;}
    .com-with-shape-01.circle > li::before {top: 9px;}
    .com-with-shape-01.dash > li {padding-left: 10px;}
    .com-with-shape-01.dash > li::before {top: 10px;}
    .com-with-shape-01.gap-long-01 > li:not(:last-of-type) {margin-bottom: 20px;}
}

@media screen and (max-width: 768px) {
    .sub {margin-top:30px;}

    /* title */
    .tit_txt {margin-top:60px; margin-bottom:20px;}
    .tit_txt div {width:20px;}
    .tit_txt h2 {font-size:24px;}

    .com-title-01 {font-size: 26px; margin-bottom: 40px;}

    .com-tab-list-01 {font-size: 14px;}
    .com-tab-list-01 a {padding: 12px 20px;} 

    .com-tab-list-02 {font-size: 14px; margin-bottom: 50px;}
    .com-tab-list-02 a {min-height: 45px;}
    .com-tab-list-02.col-5 {grid-template-columns: repeat(3,minmax(0,1fr));}
    .com-tab-list-02.col-5 li:nth-of-type(5n) {border-right: inherit;}
    .com-tab-list-02.col-5 li:nth-of-type(3n) {border-right: none;}

    .com-tab-list-03 {margin-bottom:15px;}
    .com-tab-list-03.col-6 {grid-template-columns: repeat(3, minmax(0,1fr));}
    .com-tab-list-03.col-space-between {display: grid; grid-template-columns: repeat(2, minmax(0,1fr));}

    .com-tab-list-04 {flex-wrap: nowrap; font-size: 15px; gap: 5px;}
    .com-tab-list-04 > li {width: 100%;}
    .com-tab-list-04 a {width: 100%; min-height: 45px;}

    .com-tab-list-05 {font-size: 14px;}
    .com-tab-list-05 a {padding: 10px;}
    .com-tab-list-05.type-02 {gap: 0;}

    .com-tab-list-07 {margin-bottom: 35px; font-size: 15px;}
    .com-tab-list-07 a {min-height: 45px;}

    .com-tab-list-08 {grid-template-columns: repeat(4,minmax(0,1fr)); font-size: 14px;}
    .com-tab-list-08 a {padding: 10px;}

    .com-tab-list-09 {font-size: 16px; gap: 5px;}
    
    .com-tab-list-10 {font-size: 14px;}
    .com-tab-list-10 a {min-height: 45px;}
    .com-tab-list-10.col-2 {display: grid; grid-template-columns: repeat(2,minmax(0,1fr));}
    .com-tab-list-10.col-3 {display: grid; grid-template-columns: repeat(3,minmax(0,1fr));}

    .com-box-01 {margin-bottom: 30px;}
}

@media screen and (max-width: 480px) { 
    .sub_ft {margin-top:80px;}

    /* title */
    .tit_txt {margin-top:50px;}
    .tit_txt div {width:18px;}
    .tit_txt h2 {font-size:20px;}

    .com-tab-list-03.col-6 {grid-template-columns: repeat(2, minmax(0,1fr));}

    .com-tab-list-05 {font-size: 13px;}

    .com-tab-list-08 {grid-template-columns: repeat(3,minmax(0,1fr));}
}

@media screen and (max-width: 380px) {
    .com-tab-list-03.col-space-between {grid-template-columns: repeat(1, minmax(0,1fr));}
}








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

    날씨

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

.weather {display:flex; justify-self:center; align-items:stretch;}

.weather .today {display:flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:10px; padding:70px; width:66.5%;}
.weather .today .wtd_img {width:160px;}
.weather .today .wtd_img img {width:100%;}

.weather .today .wtd_infor {margin-left:70px;}
.weather .today .wtd_infor .wtdi_temper {display:flex; align-items:flex-end;}
.weather .today .wtd_infor .wtdi_temper h3 {font-size:50px; font-weight:800;}
.weather .today .wtd_infor .wtdi_temper p {font-size:24px; font-weight:500; margin-bottom:10px; margin-left:40px; padding-left:40px; color:#000; width:190px;}
.weather .today .wtd_infor .wtdi_temper p::before {display:block; position:relative; content: ""; width:1px; height:24px; background:#000; top:26px; left:-40px;}

.weather .today .wtd_infor .wtdi_con {display:grid; grid-template-columns: repeat(auto-fill, minmax(25%, auto)); gap:10px; margin-top:10px;} 
.weather .today .wtd_infor .wtdi_con li {display:flex; align-items:center;}
.weather .today .wtd_infor .wtdi_con li p {font-size:18px; font-weight:500;}
.weather .today .wtd_infor .wtdi_con li p span {font-weight:700;}
.weather .today .wtd_infor .wtdi_con li p:first-child {margin-right:8px;}

/* 내일날씨 */
.weather .tomorrow {background:#f6f6f6; border-radius:10px; padding:45px; width:400px; margin-left:30px;}
.weather .tomorrow .tom_con {text-align:left;}
.weather .tomorrow .tom_con h3 {font-weight:600; font-size:28px; color:#000;}
.weather .tomorrow .tom_con p {font-weight:500; font-size:20px; margin-top:12px;}
.weather .tomorrow .tom_con p span {font-weight:700; margin-left:10px;}

.weather .tomorrow .tom_img {width:100%; position:relative; display:flex; justify-content:flex-end; margin-top:39px;}
.weather .tomorrow .tom_img img {width:67px;}


/* 주간예보 */
.weekly_forecast {}
.weekly_forecast .wf_ul {display:grid; grid-template-columns: repeat(auto-fill, minmax(20%, auto)); gap:25px 15px;}
.weekly_forecast .wf_ul .wf_li {border:1px solid #ddd; border-radius:10px; padding:40px;}

.weekly_forecast .wf_ul .wf_li .wf_txt {text-align:left; margin-bottom:40px;}
.weekly_forecast .wf_ul .wf_li .wf_txt h3 {font-weight:700; font-size:24px; margin-bottom:30px;}
.weekly_forecast .wf_ul .wf_li .wf_txt h3 span {font-size:18px; font-weight:400; color:#444;}
.weekly_forecast .wf_ul .wf_li .wf_txt p {font-size:20px; color:#000; font-weight:500; margin-top:10px;}
.weekly_forecast .wf_ul .wf_li .wf_txt p span {font-weight:700; margin-left:10px;}

.weekly_forecast .wf_ul .wf_li .wf_img {display:flex; justify-content:flex-end;}
.weekly_forecast .wf_ul .wf_li .wf_img img {width:85px;}


/* 오늘의 생활보건지수 */
.wtquotient {}
.wtquotient .wtq_ul {display:flex; justify-content:space-between;}
.wtquotient .wtq_ul .wtq_li {width:110px; display:flex; flex-direction:column; justify-content:center;}
.wtquotient .wtq_ul .wtq_li div {}
.wtquotient .wtq_ul .wtq_li div img {width:65px; margin:auto; text-align:center;}
.wtquotient .wtq_ul .wtq_li p {font-size:20px; font-weight:700; margin:15px 0;}
.wtquotient .wtq_ul .wtq_li h4 {font-size:20px; color:#000; font-weight:600;}


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

@media screen and (max-width: 1280px) {
    .weather .today {padding:50px; width:75%;} 
    .weather .today .wtd_infor {margin-left:50px;}
    .weather .today .wtd_infor .wtdi_temper p {margin-left:30px; padding-left:20px;}
    .weather .today .wtd_infor .wtdi_temper p::before {left:-25px;}

    .weather .tomorrow {width:300px;}
}

@media screen and (max-width: 1000px) { 
    .weather .today {padding-right:25px;}
    .weather .today .wtd_infor .wtdi_temper h3 {font-size:40px;}
    .weather .today .wtd_infor .wtdi_temper p {margin-left:20px; padding-left:10px; font-size:20px;}
    .weather .today .wtd_infor .wtdi_temper p::before {left:-5px; height:20px; top:20px;}
}

@media screen and (max-width: 768px) {
    .weather .today {padding:40px; width:100%;}
    .weather .today .wtd_img {width:140px;}

    .weather .today .wtd_infor {margin-left:30px;}

 
    .weather .today .wtd_infor .wtdi_con li p {font-size:15px;}
    .weather .today .wtd_infor .wtdi_con li p:first-child {margin-right:6px;}

    /* 내일날씨 */
    .weather .tomorrow {display:none;}


    /* 주간예보 */
    .weekly_forecast .wf_ul {gap:20px 10px;}
    .weekly_forecast .wf_ul .wf_li {padding:25px;}

    .weekly_forecast .wf_ul .wf_li .wf_txt {margin-bottom:30px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt h3 {font-size:20px; margin-bottom:20px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt h3 span {font-size:16px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt p {font-size:17px; margin-top:8px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt p span {margin-left:8px;}

    .weekly_forecast .wf_ul .wf_li .wf_img img {width:60px;}


    /* 오늘의 생활보건지수 */
    .wtquotient .wtq_ul .wtq_li {width:auto;}
    .wtquotient .wtq_ul .wtq_li div img {width:58px;}
    .wtquotient .wtq_ul .wtq_li p {font-size:17px; margin:10px 0;}
    .wtquotient .wtq_ul .wtq_li h4 {font-size:17px;}
}

@media screen and (max-width: 640px) { 
    .weather .today {padding:20px; width:100%;}
    .weather .today .wtd_img {width:100px;}

    .weather .today .wtd_infor .wtdi_temper h3 {font-size:30px;}
    .weather .today .wtd_infor .wtdi_temper p {font-size:17px; margin-left:20px; padding-left:10px; margin-bottom:5px; text-align:left;}
    .weather .today .wtd_infor .wtdi_temper p::before {height:17px; top:18px; left:-15px;}
 
    .weather .today .wtd_infor .wtdi_con li p {font-size:12px;}
    .weather .today .wtd_infor .wtdi_con li p:first-child {margin-right:3px;}


    /* 주간예보 */
    .weekly_forecast .wf_ul .wf_li {padding:20px;}

    .weekly_forecast .wf_ul .wf_li .wf_txt h3 {font-size:18px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt h3 span {font-size:13px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt p {font-size:15px; margin-top:6px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt p span {margin-left:6px;}

    .weekly_forecast .wf_ul .wf_li .wf_img img {width:45px;}


    /* 오늘의 생활보건지수 */
    .wtquotient .wtq_ul .wtq_li div img {width:48px;}
    .wtquotient .wtq_ul .wtq_li p {font-size:15px;}
    .wtquotient .wtq_ul .wtq_li h4 {font-size:15px;}
}

@media screen and (max-width: 480px) { 
    .weather .today {padding:25px; width:100%;}
    .weather .today .wtd_img {width:100px; margin:10px; text-align:center;}

    .weather .today .wtd_infor {margin-left:0;}
    .weather .today .wtd_infor .wtdi_temper {justify-content:center;}
    .weather .today .wtd_infor .wtdi_temper h3 {font-size:24px;}
    .weather .today .wtd_infor .wtdi_temper p {font-size:15px; margin-left:20px; padding-left:10px; margin-bottom:5px; width:100px;}
    .weather .today .wtd_infor .wtdi_temper p::before {height:15px; top:16px; left:-15px;}
 
    .weather .today .wtd_infor .wtdi_con li p:first-child {margin-right:6px;}


    /* 주간예보 */
    .weekly_forecast .wf_ul {gap:10px;}
    .weekly_forecast .wf_ul .wf_li {padding:15px;}

    .weekly_forecast .wf_ul .wf_li .wf_txt {margin-bottom:15px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt h3 {font-size:16px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt h3 span {font-size:12px;}
    .weekly_forecast .wf_ul .wf_li .wf_txt p {font-size:13px;}

    .weekly_forecast .wf_ul .wf_li .wf_img img {width:40px;}


    /* 오늘의 생활보건지수 */
    .wtquotient .wtq_ul {display:grid; grid-template-columns: repeat(auto-fill, minmax(30%, auto)); gap:25px 15px;}
    /* .wtquotient .wtq_ul .wtq_li {width:auto;} */
    .wtquotient .wtq_ul .wtq_li div img {width:45px;}
    .wtquotient .wtq_ul .wtq_li p {font-size:13px;}
    .wtquotient .wtq_ul .wtq_li h4 {font-size:13px;}
}

@media screen and (max-width: 380px) {
    .weather {display:block;}

    /* 주간예보 */
    .weekly_forecast .wf_ul {grid-template-columns:repeat(auto-fill, minmax(30%, auto));}

    .wtquotient .wtq_ul {grid-template-columns:repeat(auto-fill, minmax(25%, auto));}
}

@media screen and (max-width: 340px) {
    .weather .today {display:block;}
    .weather .today .wtd_img {margin:auto;}
}



/* 총장 인사말 */
.sub-pres-intro {display: flex; align-items: flex-start; column-gap: 90px; background: url("/resources/user/mobile/img/icon/icon_emblem.png") no-repeat top left 22%; background-size: 423px; text-align:left;}
.sub-pres-intro .autogrpah-box {margin-top: 40px;}
.sub-pres-intro .img-box {width: 35%;}
.sub-pres-intro .img-box .txt-01 {color:#222; font-size: 18px; margin-bottom: 15px;}
.sub-pres-intro .img-box .txt-02 {font-size: 20px; font-weight: 600; display: flex; align-items: flex-end; gap: 15px; word-break: break-all;}

.sub-pres-intro .img-box figure {position: relative;}
.sub-pres-intro .img-box figure::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 80%, #fff);}
html[data-mode="dark"] .sub-pres-intro .img-box figure::before {background: linear-gradient(to bottom, transparent 80%, var(--bg--bg-primary));}

.sub-pres-intro .txt-box {width: 65%; white-space: normal;}
.sub-pres-intro .txt-box h2 {color:#004386; font-weight: 600; font-size: 38px; font-family: 'NanumMyeongjo', sans-serif; line-height: 1.3; position: relative;} 
.sub-pres-intro .txt-box h2::before, .sub-pres-intro .txt-box .end-quote {font-size: 63px; font-weight: 800;}
.sub-pres-intro .txt-box h2::before {content: "“"; position: absolute; top: -17px; left: -31px;}
.sub-pres-intro .txt-box .end-quote {display: inline-block; vertical-align: text-top; transform: translateY(-11px);}

.sub-pres-intro .txt-box p {font-size: 18px; font-weight: 500; line-height:1.5;} 
.sub-pres-intro .txt-box .line-01 {margin-bottom: 8px; display:block;}
.sub-pres-intro .txt-box .line-02 {margin-bottom: 50px; display:block;}

@media screen and (max-width: 1080px) {
    .sub-pres-intro {column-gap: 50px; background-size: 300px;}
    .sub-pres-intro .autogrpah-box {margin-top: 25px;}
    .sub-pres-intro .img-box .txt-01 {font-size: 16px; margin-bottom: 10px;}
    .sub-pres-intro .img-box .txt-02 {font-size: 18px;}
    .sub-pres-intro .img-box .txt-02 img {height: 36px;}
    .sub-pres-intro .txt-box h2 {font-size: 28px; font-weight: 800;}
    .sub-pres-intro .txt-box h2::before, 
    .sub-pres-intro .txt-box .end-quote {font-size: 50px;}
    .sub-pres-intro .txt-box h2::before {left: -26px;}
    .sub-pres-intro .txt-box p {font-size: 16px;}
    .sub-pres-intro .txt-box .line-01 {margin-bottom: 5px;}
    .sub-pres-intro .txt-box .line-02 {margin-bottom: 35px;}
}

@media screen and (max-width: 768px) {
    .sub-pres-intro {flex-wrap: wrap; background-size: 220px;}
    .sub-pres-intro .img-box {width: 100%; display: flex; align-items: flex-end; gap: 20px; margin-bottom: 40px;}
    .sub-pres-intro .img-box figure {width: 40%;}
    .sub-pres-intro .autogrpah-box {width: 60%; margin-top: 0; padding-bottom: 10px;}
    .sub-pres-intro .img-box .txt-01 {font-size: 14px;}
    .sub-pres-intro .img-box .txt-02 {font-size: 16px;}
    .sub-pres-intro .img-box .txt-02 img {height: 30px;}
    .sub-pres-intro .txt-box {width: 100%;}
    .sub-pres-intro .txt-box :where(h2, p) {padding-left: 18px;}
    .sub-pres-intro .txt-box h2 {font-size: 20px;}
    .sub-pres-intro .txt-box h2::before, 
    .sub-pres-intro .txt-box .end-quote {font-size: 40px;}
    .sub-pres-intro .txt-box h2::before {left: -2px; top: -15px;}
    .sub-pres-intro .txt-box p {font-size: 15px;}
    .sub-pres-intro .txt-box .line-02 {margin-bottom: 20px;}
}

@media screen and (max-width: 480px) {
    .sub-pres-intro {background-position: top center;}
    .sub-pres-intro .img-box {display: block;}
    .sub-pres-intro .img-box figure {width: 200px; margin: 0 auto 15px;}
    .sub-pres-intro .autogrpah-box {width: 100%; text-align: center; margin-top: 20px;}
    .sub-pres-intro .img-box .txt-02 {justify-content: center; padding: 0 20px;}
}







/* 찾아오시는 길 */
.sponsor {}
.sponsor .campus-ctt-box {display: none;}
.sponsor .campus-ctt-box.active {display: block;}
.sponsor .map-box {border: 1px solid #ddd;}
.sponsor .map-box .map-link {display: block;}
.sponsor .map-box .map-link img {width: 100%;}
.sponsor .map-box .info-box {background-color: #f9f8f7; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; row-gap: 15px; column-gap: 40px;}
.sponsor .map-box .info-box dl > div {display: flex; row-gap: 5px; column-gap: 30px;}
.sponsor .map-box .info-box dl > div:not(:last-of-type) {margin-bottom: 12px;}
.sponsor .map-box .info-box dt {flex-shrink: 0; min-width: 70px; font-weight: 600; position: relative; padding-left: 14px; text-align:left;}
.sponsor .map-box .info-box dt::before {content: ""; width: 4px; height: 4px; background-color:#004286; border-radius: 50%; position: absolute; top: 8px; left: 0;}
.sponsor .map-box .map a {display: block; height: 562px;}
.sponsor .map-box .map img {width: 100%; height: 100%; object-fit: cover;}

.sponsor .com-btn-kakaomap {flex-shrink: 0;}
.sponsor .tbl-info-top {margin-bottom: 10px;}
.sponsor .time-table {display: grid; grid-template-columns: repeat(2, 50px); row-gap: 7px; justify-content: center;}
.sponsor .way-ctt-box {display: none;}
.sponsor .way-ctt-box.active {display: block;}
.sponsor .root_daum_roughmap {width:100% !important;}

.com-btn-kakaomap {font-size: 18px; color: #fff; background-color: #004286; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 20px; font-weight: 600;}
.com-btn-kakaomap:where(:hover,:focus) {filter: brightness(0.8);}

.sponsor .tbl-info-top {margin-bottom: 10px;}

@media screen and (max-width: 1280px) {
    .sponsor .map-box .map a {height: 400px;}
    .sponsor .map-box .info-box {padding: 17px;}
    .sponsor .map-box .info-box dl {font-size: 14px;}
    .sponsor .map-box .info-box dl > div {column-gap: 5px;}
    .sponsor .map-box .info-box dl > div:not(:last-of-type) {margin-bottom: 7px;}
    .sponsor .map-box .info-box dt {padding-left: 11px;}
    .sponsor .map-box .info-box dt::before {top: 6px;}
    .sponsor .time-table {grid-template-columns: repeat(2, 40px);}

    .com-btn-kakaomap {font-size: 16px; padding: 10px 15px;}
}

@media screen and (max-width: 768px) {
    .sponsor .map-box .map a {height: 300px;}
    .sponsor .map-box .info-box {flex-wrap: wrap;}
    .sponsor .com-btn-kakaomap {width: 100%; margin: 0 auto;}

    .com-btn-kakaomap {font-size: 14px; padding: 10px 12px;}
    .com-btn-kakaomap img {width: 18px;}
}

@media screen and (max-width: 480px) {
    .sponsor .map-box .map a {height: 200px;}
    .sponsor .com-tab-list-01 {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); text-align: center;}
    .sponsor .com-tab-list-01 a {height: 100%; display: flex; justify-content: center; align-items: center;}

}



/* 통학버스 */
.sub-shuttle-bus {}
.sub-shuttle-bus .tt-pd-box {padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #ddd;}
.sub-shuttle-bus .ug-tab-ctt-box {display: none;}
.sub-shuttle-bus .ug-tab-ctt-box.active {display: block;}


/* 대학 */
.sub-university {min-height: 300px; display: flex; flex-direction: column; justify-content: center; white-space: normal; border-bottom: 1px solid var(--border--content-box); background: url("/resources/user/mobile/img/icon/icon_emblem_sub.svg") no-repeat center right/290px; gap: 30px; margin-bottom: 50px; padding: 10px 0;}
.sub-university :where(.title,.ctt) {width: 70%;}
.sub-university .title {font-size: 30px; font-weight: 800; text-align:left;}
.sub-university .ctt {font-size: 17px; font-weight: 400; line-height: 1.6; text-align:left;}


@media screen and (max-width: 1080px) {
    .sub-university {min-height: 230px; background-size: 200px; gap: 20px;}
    .sub-university :where(.title,.ctt) {width: 75%;}
    .sub-university .title {font-size: 24px;}
    .sub-university .ctt {font-size: 15px;}
}

@media screen and (max-width: 768px) {
    .sub-university {min-height: 180px; gap: 15px; background-size: 160px;}
    .sub-university :where(.title,.ctt) {width: 100%;}
    .sub-university .title {font-size: 20px;}
    .sub-university .ctt {font-size: 14px;}
}

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





/* 뉴스제보 */
.con_box {}
.con_box ul {width:100%; height:250px; border:1px solid #ddd; overflow-y:scroll; padding:40px; white-space:normal;}
.con_box ul li {font-size:18px; text-align:left; font-weight:500; line-height:1.6; margin-top:10px;}
.con_box ul li.bd_txt {font-weight:700; font-size:22px; margin-top:30px;}
.con_box ul li:first-child {margin-top:0;}

.con_btn {margin-top:40px;}
.con_btn button {font-size:18px; font-weight:600; width:300px; padding:20px 0; background:#111; color:#fff;}
.con_btn button.consent {margin-right:20px; border:1px solid #ddd; background:#fff; color:#000;}
.con_btn button.active {background:#525252;}
.con_btn button.consent.active {background:#004286; color:#fff;}


@media screen and (max-width: 1280px) {  
    .con_box ul {height:220px; padding:35px;}
    .con_box ul li {font-size:16px;}
    .con_box ul li.bd_txt {font-size:20px;}
    .con_box ul li:first-child {margin-top:0;}

    .con_btn button {font-size:16px;}  
}

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

@media screen and (max-width: 768px) {    
    .con_box ul {height:200px; padding:30px;}
    .con_box ul li {font-size:14px;}
    .con_box ul li.bd_txt {font-size:18px;}
    .con_box ul li:first-child {margin-top:0;}

    .con_btn {margin-top:30px;}
    .con_btn button {font-size:14px; width:40%;}  
    .con_btn button.consent {margin-right:10px;}
}

@media screen and (max-width: 480px) {   
    .con_btn {display:flex; flex-direction:column; margin-top:20px;} 
    .con_btn button {width:100%;}
    .con_btn button.consent {margin-right:0; margin-bottom:12px;}
}


/* 찾아오시는 길 */
.sponsor {}
.sponsor .campus-ctt-box {display: none;}
.sponsor .campus-ctt-box.active {display: block;}
.sponsor .map-box {border: 1px solid var(--border--content-box);}
.sponsor .map-box .map-link {display: block;}
.sponsor .map-box .map-link img {width: 100%;}
.sponsor .map-box .info-box {background-color: var(--bg--sub_content-box02); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; row-gap: 15px; column-gap: 40px;}
.sponsor .map-box .info-box dl > div {display: flex; row-gap: 5px; column-gap: 30px;}
.sponsor .map-box .info-box dl > div:not(:last-of-type) {margin-bottom: 12px;}
.sponsor .map-box .info-box dt {flex-shrink: 0; min-width: 70px; font-weight: 600; position: relative; padding-left: 14px;}
.sponsor .map-box .info-box dt::before {content: ""; width: 4px; height: 4px; background-color: var(--contents--accent-color); border-radius: 50%; position: absolute; top: 8px; left: 0;}
.sponsor .map-box .map a {display: block; height: 562px;}
.sponsor .map-box .map img {width: 100%; height: 100%; object-fit: cover;}

.sponsor .com-btn-kakaomap {flex-shrink: 0;}
.sponsor .tbl-info-top {margin-bottom: 10px;}
.sponsor .time-table {display: grid; grid-template-columns: repeat(2, 50px); row-gap: 7px; justify-content: center;}
.sponsor .way-ctt-box {display: none;}
.sponsor .way-ctt-box.active {display: block;}
.sponsor .root_daum_roughmap {width:100% !important;}

@media screen and (max-width: 1080px) {
    .sponsor .map-box .map a {height: 400px;}
    .sponsor .map-box .info-box {padding: 17px;}
    .sponsor .map-box .info-box dl {font-size: 14px;}
    .sponsor .map-box .info-box dl > div {column-gap: 5px;}
    .sponsor .map-box .info-box dl > div:not(:last-of-type) {margin-bottom: 7px;}
    .sponsor .map-box .info-box dt {padding-left: 11px;}
    .sponsor .map-box .info-box dt::before {top: 6px;}
    .sponsor .time-table {grid-template-columns: repeat(2, 40px);}
}

@media screen and (max-width: 768px) {
    .sponsor .map-box .map a {height: 300px;}
    .sponsor .map-box .info-box {flex-wrap: wrap;}
    .sponsor .com-btn-kakaomap {width: 100%; margin: 0 auto;}
}

@media screen and (max-width: 480px) {
    .sponsor .map-box .map a {height: 200px;}
    .sponsor .com-tab-list-01 {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); text-align: center;}
    .sponsor .com-tab-list-01 a {height: 100%; display: flex; justify-content: center; align-items: center;}

}

/* 후원의집찾기 */
.board-container {width:100%;}
.board-container .rotateButton {width:100%; border-bottom:1px solid #ddd; padding:20px; display:flex; align-items:center;  justify-content:space-between; font-size:20px; font-weight:500; white-space:normal;}
.board-container .rotateButton.first {border-top:2px solid #004286;}

.rotateIcon {font-size: 24px; transition: transform 0.3s ease;}
.rotated {transform: rotate(180deg);}

.board-container .board-content {max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.board-container .board-content.show {max-height: 600px;}

.board-container .board-content .bc_sponsor {}
.board-container .board-content .bc_sponsor li {display:flex; align-items:center; justify-content:flex-start; padding:20px; background:#fafafa; border-bottom:1px solid #ddd;}
.board-container .board-content .bc_sponsor li p {font-size:18px; font-weight:500; white-space:normal; text-align:left;}
.board-container .board-content .bc_sponsor li p img {margin-right:20px;}

.board-container .board-content .bc_map .map {width:100%; height:auto;}

@media screen and (max-width: 1280px) {
    .board-container .rotateButton {font-size:18px;}

    .rotateIcon {font-size: 20px;}
    .board-container .board-content.show {max-height:500px;}

    .board-container .board-content .bc_sponsor li {padding:15px 20px;}
    .board-container .board-content .bc_sponsor li p {font-size:16px;}
    .board-container .board-content .bc_sponsor li p img {margin-right:15px;}
}

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

@media screen and (max-width: 768px) {    
    .board-container .rotateButton {font-size:16px; padding:15px 20px;}

    .rotateIcon {font-size:16px;}
    .board-container .board-content.show {max-height:500px;}

    .board-container .board-content .bc_sponsor li p {font-size:14px;}
    .board-container .board-content .bc_sponsor li p img {margin-right:15px; width:16px;}
}

@media screen and (max-width: 480px) {    
    .board-container .board-content .bc_sponsor li p img {margin-right:5px;}
}



/* 후원하기 */
.tit_font {text-align:left; font-weight:500; font-size:20px; margin-bottom:50px; white-space:normal;}
.board-content .bc_div {background:#FAFAFA; border-bottom:1px solid #ddd; padding:20px 30px; text-align:left;}
.board-content .bc_div .bc_sptxt {font-size:18px; margin-top:15px; color:#444; font-weight:500; margin-left:20px; white-space:normal; line-height:1.6;}
.board-content .bc_div .bc_sptxt::before {content: ""; display:block; width:5px; height:5px; background:#444; border-radius:50%; position:relative; top:15px; left:-20px;}
.board-content .bc_div .bc_sptxt:first-child {margin-top:0;}
.board-content .bc_div .bc_sptxt span {padding:5px 20px; border-radius:50px; margin-right:10px; background:#A6165F; color:#fff;}
.board-content .bc_div .bc_span {font-size:16px; margin-left:40px; position:relative; display:flex; flex-direction:column; margin-top:10px; white-space:normal;}
.board-content .bc_div .bc_span::before {content:""; display:block; width:8px; height:1px; background:#444; position:relative; top:10px; left:-20px;}

@media screen and (max-width: 1280px) {
    .tit_font {font-size:18px;}
    .board-content .bc_div {padding:20px 30px;}
    .board-content .bc_div .bc_sptxt {font-size:16px; margin-top:12px; margin-left:15px;}
    .board-content .bc_div .bc_sptxt::before {width:4px; height:4px; left:-15px;}
    .board-content .bc_div .bc_sptxt span {padding:5px 15px; margin-right:10px;}
    .board-content .bc_div .bc_span {font-size:15px; margin-left:35px; margin-top:8px;}
    .board-content .bc_div .bc_span::before {width:6px; top:9px; left:-15px;}
    
}

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

@media screen and (max-width: 768px) {    
    .tit_font {font-size:17px; margin-bottom:30px;}
    .board-content .bc_div {padding:15px 20px;}
    .board-content .bc_div .bc_sptxt {font-size:14px; margin-top:10px; margin-left:10px;}
    .board-content .bc_div .bc_sptxt::before {width:3px; height:3px; top:12px; left:-10px;}
    .board-content .bc_div .bc_sptxt span {padding:3px 15px; margin-right:5px;}
    .board-content .bc_div .bc_span {font-size:13px; margin-left:30px; margin-top:6px;}
    .board-content .bc_div .bc_span::before {width:5px; top:8px; left:-10px;}
}

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











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

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

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

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