@charset "utf-8";
/** 인사말 **/
.greeting {margin-bottom: 6rem;}
.greeting .title {margin-bottom: 4.5rem; font-family:'SCDream', 'Malgun Gothic', '맑은고딕', sans-serif; font-size: 2.9rem; font-weight: 500;}
.greeting .title span {font-weight: 700; background:var(--gra); background-clip:text;  -webkit-background-clip:text;  -webkit-text-fill-color: transparent;}
.greeting .con-box {display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;}
.greeting .con-l {flex: 1 1 auto;}
.greeting .con-l .txt {position: relative; padding-top: 6.3rem; width: 80%;}
.greeting .con-l .txt::before {content: ''; position: absolute; top: 0; left: 0rem; width: 4.4rem; height: 1.8rem; background: url( ../img/contents/greeting_img01.png) no-repeat center / 100%;}
.greeting .con-l .txt::after {content: ''; position: absolute;  top: 7rem; right: -26rem; width: 38rem; height: 38rem;
  background: url(../img/contents/greeting_img03.png) no-repeat center / 100%; z-index: -1;}
.greeting .con-l .txt p {margin-bottom: 2rem; font-size: 1.8rem;}
.greeting .con-l .txt p>span {font-weight: 600;}
.greeting .con-l .txt p.greeting-point span {font-weight: 600; font-size: 2.2rem; background: linear-gradient(104deg, #22AE8D 0%, #955FDA 100%);background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.greeting .con-l .txt p span.greeting-pc {display: block;}
/* .greeting .con-r .imgbox {max-width: 39.4rem; max-height: 48rem; border-radius: 17rem 1rem 1rem 1rem; overflow: hidden; background-color: #0E6F73;} */
.greeting .con-r .imgbox {position: relative;}
.greeting .con-r .imgbox::after {content: ''; position: absolute; left: -2.6rem; top: -2.5rem; width: 38rem; height: 48rem; border-radius: 18rem 1rem 1rem 1rem; background: linear-gradient(87.35deg, #FAE631 -1.06%, #55D24B 12.49%, #0E964C 80%); z-index: -1;}
.greeting .con-r .imgbox {display: flex; align-items: center; justify-content: center; position: relative; width: 42rem; height: 48rem;}
.greeting .con-r .imgbox img {object-fit: cover; height: 100%; max-width: none;  border-radius: 17rem 1rem 1rem 1rem; line-height: 0; overflow: hidden; border: 1px solid #65b569;}
.greeting .con-r p.sign {display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 3rem;}

/** 연혁 **/
.history .con-box { position: relative; padding: 0 0 4rem 3rem; background: #fff url(/open_content/council/img/sub/slogan.png) no-repeat left top; }
.history .con-box>ul>li { display: flex; margin-bottom: 4rem; }
.history .con-box>ul>li>p { position: relative; text-align: right; width: 13rem; padding-right: 8rem; font-size: 2.4rem; font-weight: 700; background: var(--gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; box-sizing: content-box; }
.history .con-box>ul>li>p:before { content: ''; position: absolute; top: 0; right: -0.4rem; width: 0.9rem; height: 0.9rem; background: #fff; border: 0.3rem solid #41B748; border-radius: 50%; box-sizing: border-box; z-index: 1; }
.history .con-box>ul>li>p::after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(#4CB731 0%, #31B76E 14.58%, #14787C 100%); }
.history .con-box ul li div.con { margin-left: 8rem; }
.history .con-box ul li div.con dl { position: relative; display: flex; margin-bottom: 3rem; }
.history .con-box ul li div.con dl:last-child { margin-bottom: 0; }
.history .con-box ul li div.con dl dt { margin-right: 3rem; font-size: 1.8rem; font-weight: 700; color: var(--color); }
.history .con-box ul li div.con dl dd li { margin-bottom: 0.3rem; }
.history .con-box ul li div.con dd li span { position: relative; margin-right: 2rem; padding-left: 1.2rem; font-weight: 700; }
.history .con-box ul li div.con dd li span::before { content: ''; position: absolute; left: 0; top: 1rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #70C975; }

/** 찾아오시는 길 **/
.location { box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.18); border-radius: 2rem; overflow: hidden; }
.location .map {margin-bottom: 0; width: 100%; min-height: 40rem;}
.location .con {display: flex; justify-content: space-between;padding: 3rem 8rem;background:linear-gradient(90deg, #22AE8D 20%, #955FDA 100%); }
.location .con p { position: relative; padding-left: 5.8rem; color: #fff; font-size: 1.6rem; font-weight: 500; }
.location .con p::before { content: ''; position: absolute; left: 0; top: 0rem; width: 4.8rem; height: 5rem; border-radius: 1.8rem; }
.location .con .map-box p::before { background: rgba(0, 0, 0, 20%) url(/open_content/council/img/sub/map_ic01.svg) no-repeat center center; }
.location .con .call-box p::before { background: rgba(0, 0, 0, 20%) url(/open_content/council/img/sub/map_ic02.svg) no-repeat center center; }

/** 층별안내 **/
.office .stab ul { display: flex; text-align: center; }
.office .stab ul li { width: 100%; height: 4.5rem; color: #c4c4c4; font-size: 1.8rem; font-weight: 500; border-bottom: 2px solid #EFEFEF; transition: .3s; }
.office .stab ul li.on { color:var(--color); border-bottom-color:var(--color);}
.office .stab ul li a { text-decoration: none; }
.office .office_con .con { margin-top: 3rem; border: 1px dashed var(--point03); border-radius: 2rem; overflow: hidden; }
.office .office_con .map { padding: 6rem 0; }
.office .office_con .map p { text-align: center; }
.office .office_con .txt { padding: 3rem 0; text-align: center; background: #F8F8F8; }
.office .office_con .txt p { padding-left: 2.8rem; }
.office .office_con .txt p span { position: relative; }
.office .office_con .txt p span::before { content: ''; position: absolute; left: -2.5rem; top: 0.2rem; width: 1.8rem; height: 2.1rem; background: url(/open_content/council/img/contents/floor_ic.svg) no-repeat center center / 100%; }

/*현역의원*/
.member { display: flex; gap: 4rem; flex-wrap: wrap; margin-top: 3rem; margin-left: 1.5rem; }
.member>li { display: flex; align-items: center; justify-content: center; gap: 3rem; padding: 1.5rem; width: calc(50% - 4rem / 2); min-height: 30rem; border-radius: 0.8rem 5rem 0.8rem 0.8rem; background: linear-gradient(125deg, rgba(60, 160, 136, 0.10) 0%, rgba(222, 232, 166, 0.10) 100%), url(../img/contents/member-bg.png) no-repeat center / cover; }
.member .photobox { position: relative; }
.member .photobox .photo { display: flex; justify-content: center; align-items: flex-start; width: 18rem; /* height: 20rem; */
 height:auto; border-radius: 5rem; background: #FFF; overflow: hidden; }
.member .photobox .tag { position: absolute; right: -1rem; top: 0; color: #BB9226; padding: 1.5rem; font-size: 1.6rem; font-weight: 600; background: url(../img/contents/member-tag.svg) no-repeat center / 4.5rem; }
.member .photobox .tag.sfont { padding-top: 1.7rem; font-size: 1.3rem; }
.member .conbox { max-width: 20.7rem; }
.member .conbox .name { display: flex; align-items: center; gap: 1rem; color: #000; font-size: 3rem; font-weight: 700; line-height: 2.4rem; letter-spacing: 0.003rem; }
.member .conbox .name a { display: block; width: 3.2rem; height: 3rem; border-radius: 1rem; background: #635ED0 url(../img/contents/member-home.svg) no-repeat center / 100%; font-size: 0; text-indent: -5000px; }
.member .conbox .bl04 { margin-top: 2rem; margin-left: 0; }
.area-member { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 3rem; padding: 3rem 6rem; border-radius: 2rem; border: 1px dashed #3DA189; overflow: hidden; }
.area-member::after { content: ''; position: absolute; right: 5.2rem; bottom: -1.3rem; width: 31.4rem; height: 21.7rem; background: url(../img/contents/area-member-bg.png) no-repeat center / 100%; }
.area-member .area-map { margin-top: 0.7rem; }
.area-member .area-map .con { position: absolute; left: 6.4rem; top: 6.7rem; padding-left: 2.3rem; font-size: 1.4rem; font-weight: 400; line-height: 2.2rem; letter-spacing: 0.0014rem; background: url(../img/contents/area-map-con.svg) no-repeat left top / 1.8rem; }
.area-member .area-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2rem; margin-top: 5rem; padding: 3rem 5.4rem; width: 100%; max-width: 33.3rem; min-height: 43rem; border-radius: 2rem; background: #F9F9F9; }
.area-member .area-list li a { display: flex; gap: 1.5rem; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -0.016rem; }
.area-member .area-list li.select a,
.area-member .area-list li.select a strong { color: #249B74; }
.area-member .area-list li a strong { font-weight: 700; }
.area-member-list>div { display: none; }
.area-member-list>div.on { display: block; }

/** 의장약력 **/
.profile .intro {display: flex; justify-content: space-evenly; position: relative; margin-top: 10rem; padding: 4rem 2rem 4rem 5rem; border-radius: 0 20rem 0 0; background: url(../img/contents/intro-bg.png) no-repeat bottom right #FCFFFC;}
.profile .intro::before {content: ''; position: absolute; right:-0.3rem; top:-0.3rem; width: 100%; height: 100%; border-radius: 0 20rem 0 0; border-top: 0.3rem solid transparent; border-right: 0.3rem solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #4CB731 0%, #14787C 100%); background-origin: border-box; background-clip: content-box, border-box; -webkit-background-clip: content-box, border-box; box-sizing: border-box; overflow: hidden; z-index: -1;}
/* .profile .intro::after {content: ''; position: absolute;left: 0; top: 0; width: 36rem; height: 40.8rem; background: url(../img/contents/profile_img01.png);} */
/* .profile .intro::after {content: ''; position: absolute;left: 5%; top: -3.6rem; width: 33rem; height: 40.8rem; background: url(../img/contents/profile_img02.png) no-repeat; background-size: 100%; filter: drop-shadow(0 2px 1.5rem #c7c7c7);} */

.profile .intro img.intro_img {position: absolute; top: -2rem; left: 5%; width: 35rem;}
.profile .intro>div {padding-left: 30%;}
.profile .intro .tit p {font-family:'SCDream', 'Malgun Gothic', '맑은고딕', sans-serif;}
.profile .intro .tit p.stit {font-size: 1.8rem;}
.profile .intro .tit p.name {font-size: 4.5rem; font-weight: 800; color: #14787C; line-height: 140%;}
.profile .intro .tit p.name span {font-size: 3.4rem;}
.profile .intro .con {display: flex; flex-direction: column; gap: 1em; margin-top: 1.2rem;}
.profile .intro .con dl {position: relative; padding-left: 3.4rem; display: flex; gap: 1.5rem; align-items: center;}
.profile .intro .con dl::before, .profile .edu p::before {content: ''; position: absolute; left: 0; top: 0.3rem; width: 2.6rem; height: 2.6rem; border-radius: 0.5rem; background-image: url(../img/contents/profile_ic.svg); background-color: #3DA189;background-repeat: no-repeat; background-size: 13rem;}
.profile .intro .con dl:nth-of-type(1)::before {background-position: 0rem 0;}
.profile .intro .con dl:nth-of-type(2)::before {background-position: -2.6rem 0;}
.profile .intro .con dl:nth-of-type(3)::before {background-position: -5.2rem 0;}
.profile .intro .con dl:nth-of-type(4)::before {background-position: -7.8rem 0;}
.profile .intro .con dt {width: 6.6rem; font-size: 1.8rem; font-weight: 700; flex: 0 0 auto;}
.profile .intro .con dd {font-size: 1.6rem;}

.profile .edu {margin-top: 3rem; padding: 3rem; border-radius: 1rem; background-color: #f8f8f8;}
.profile .edu p {position: relative; padding-left: 3.6rem; font-size: 1.6rem;}
.profile .edu p::before {top: 0.2rem; background-position: -10.4rem 0;}
.profile .edu span.ing {margin-left:1.2rem; padding: 0.2rem 1rem; font-size: 1.4rem; border-radius: 2rem; background-color: #e1e1e1; }
.profile .career {position: relative; margin-top: 3rem; margin-left: 0.5rem; padding: 2rem;}
.profile .career::before {content: ''; position: absolute; left: 0; top: 0; width: 0.2rem; height: 100%; background: var(--gra);}
.profile .career dl {display: flex; gap: 2rem; margin-bottom: 2rem;}
.profile .career dt {width: 6.8rem; font-size: 1.6rem; font-weight: 500; color:#3DA189; flex: 0 0 auto;}
.profile .career dd {display: flex; align-items: flex-start; font-size: 1.6rem;}
.profile .career dd span {flex: 0 0 auto; margin-right: 0.8rem; padding: 0.4rem 0.9rem 0.4rem 0.8rem; font-size: 1.4rem; border-radius: 1rem;background: #FDDB62;}
.profile .career dd span.past {background: #E7E7E7;}

/** 조직도 **/
.organ, .organ02 {position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 3rem;}
.organ::before, .organ02::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 0.1rem; height: 52.5%; background: #ddd;}
.organ li, .organ02 li {z-index: 1;}
/* .organ li.rank1 {display: flex; align-items: center; justify-content: center; width: 16rem; height: 16rem; color: #FFF; font-size: 2.8rem;  font-weight: 700; line-height: 116%; border-radius: 50%; border: 1rem solid #EFF6EF; background: linear-gradient(139deg, #4CB731 0%, #31B76E 20%, #14787C 100%);
} */
.organ li.rank1, .organ02 li.rank1 span  {display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; line-height: 116%;}
.organ li.rank1 { width: 16rem; height: 16rem; font-size: 2.8rem; border-radius: 50%; border: 1rem solid #EFF6EF; background: linear-gradient(139deg, #4CB731 0%, #31B76E 20%, #14787C 100%);}
.organ li.rank2, .organ02 li.rank1-2 p{margin-top: 4rem; padding: 1.5rem 6.5rem; color: #fff; font-size: 2rem; font-weight: 500; border-radius: 3rem 0.8rem;  background: url(../img/contents/rank2_bg.png) no-repeat right center #0E6F73;}
.organ li.rank3 {position: relative; margin-top: 3rem;}
.organ li.rank3::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 56%; height: 0.1rem; background: #ddd;}
.organ li.rank3>ul, .organ02 li.rank2>ul {display: flex; gap: 6rem; margin-top: 4rem;}
.organ li.rank3>ul>li, .organ02 li.rank2>ul>li {position: relative; width: 22rem;}
.organ li.rank3>ul>li:before, .organ02 li.rank2>ul>li:before {content: ''; position: absolute; left: 0; right: 0; top: -4rem; margin: auto; width: 0.1rem; height: 4rem; background: #ddd;}
.organ li.rank3>ul>li>p.tit, .organ02 li.rank2>ul>li>p.tit {padding: 1.5rem 6rem; color: #fff; font-size: 1.8rem; font-weight: 500; border-radius: 0.8rem; background: url(../img/contents/rank3_bg.png) no-repeat right center #194361;}
.organ li.rank3>ul>li>ul.list, .organ02 li.rank1-2 ul.list  {display: flex; flex-direction: column; justify-content: center;margin-top: 1rem; padding: 2rem 4rem; border-radius: 0.8rem; min-height: 15.6rem; background-color: #f4f4f4;}
.organ li.rank3>ul>li>ul.list li {font-size: 1.6rem; line-height: 180%;}

/** 의회사무국 조직도 **/
.organ02::before {height: 80%;}
.organ02 li.rank1 {position: relative;}
.organ02 li.rank1 span {height: 6.4rem; padding: 2rem 6rem; font-size: 2.2rem; border-radius: 3rem 0.8rem; background:url(../img/contents/rank2_bg.png) no-repeat right center #28A96B;}
.organ02 li.rank1-2 {position: absolute; top: 5.6rem; left: 47.8%; padding: 1rem 6rem; border-radius: 2.5rem 0.8rem}
.organ02 li.rank1-2 p {position: relative;}
.organ02 li.rank1-2 p::after {content: ''; position: absolute; top: 0; bottom: 0; left: -3.7rem; margin: auto; width: 4rem; height: 1px; background: #ccc; z-index: -1;}
.organ02 li.rank2>ul {position: relative; margin-top: 30rem; padding-top: 4rem; gap: 3rem;}
.organ02 li.rank2>ul::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 70%; height: 0.1rem; background: #ddd;}
.organ02 li.rank2>ul>li {position: relative;width: 18rem;}
.organ02 li.rank2>ul>li>p.tit {padding: 1.5rem 2rem;}

/** 의원연구단체 **/
.group_m {display: flex; gap: 1.2rem; margin-top: 3rem; width: 100%;}
.group_m li {position: relative; padding: 2rem 1rem; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; border-radius: 1rem; background:url(../img/contents/group_bg.png) no-repeat right bottom #f6f6f6;}
.group_m.overLi{flex-wrap: wrap;}
.group_m.overLi li{flex-basis:20%}
.group_m .photobox {position: relative;}
.group_m .photobox .tag {position: absolute; right: -1rem; top: 0; color: #BB9226; padding: 1.5rem; font-size: 1.6rem; font-weight: 600; background: url(../img/contents/member-tag.svg) no-repeat center / 4.5rem;}
.group_m .photobox .photo {display: flex; justify-content: center; align-items: flex-start;
width: 15rem; height: 15rem; border-radius: 5rem; overflow: hidden;}
.group_m li.m_democratic .photobox .photo {background: #B8DDFF;}
.group_m li.m_liberty .photobox .photo {background: #FDC1C1;}
.group_m .conbox p.name {display: flex; gap: 0.5rem;  align-items: center; font-size: 1.8rem; font-weight: 700;}
.group_m .conbox p.name span.leader {padding: 0.2rem 1.3rem 0.2rem 1.1rem; color: #fff; font-size: 1.4rem; font-weight: 500; border-radius: 5rem; background: var(--gra);}
.group_m .conbox p.name span {font-size: 1.6rem; font-weight: normal;}
.group_m .conbox p.name a {display: block; margin-left: 0.5rem; width: 3.2rem; height: 3rem; border-radius: 1rem; background: #635ED0 url(../img/contents/member-home.svg) no-repeat center / 100%; font-size: 0; text-indent: -5000px;}
.group_m.col6 {flex-wrap: wrap;}
.group_m.col6 li {width: 32%;}

/** 신년사 **/
.message {position: relative; padding: 0 6rem 8rem; border: 1px solid #EBCE94; border-radius:4px;}
.message::before,
.message::after,
.message div.con-box::before,
.message div.con-box::after {content: ''; position: absolute; width: 6.2rem; height: 6.2rem; background: url(../img/contents/message-tbox.svg) no-repeat;}
.message::before {top: 2rem; left: 2rem;}
.message::after {top: 2rem; right: 2rem; transform: rotate(90deg);}
.message p.title {position: relative; text-align: center; padding-top: 10rem; font-family:'SCDream', 'Malgun Gothic', '맑은고딕', sans-serif; font-size: 2.6rem; font-weight: 600;}
.message p.title::before {content: ''; position: absolute; top: 0; left: calc(50% - 7.5rem); width: 15rem; height: 1.7rem; background: url(../img/contents/message-bg.svg) no-repeat center / 15rem}
.message div.con-box {display: flex; gap: 5rem; margin-top: 8rem;}
.message div.con-box>div {width: 50%;}
.message div.con-box>div p {font-size: 1.8rem; margin-bottom: 3rem;}
.message div.con-box>div p.m-point {color: #3D5696;}
.message div.con-box .con-r {position: relative;}
.message div.con-box .con-r::before {content: ''; position: absolute; bottom: 0; right:0; width: 23.8rem; height: 23.8rem; background: url(../img/contents/message-bg-ic.svg) no-repeat center/23.8rem}
.message div.con-box .con-r p:first-child {font-size: 2.2rem;}
.message .con-r p.sign {display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 5rem;}
.message div.con-box::before {bottom: 2rem; left: 2rem; transform: rotate(270deg);}
.message div.con-box::after {bottom: 2rem; right: 2rem; transform: rotate(180deg);}


/* 새해인사 2025 */
.newyear2025{padding: max(30px, 5%) max(30px, 8%); background-color: #fafafa; background-image: url(../img/contents/newyear2025_bgT.jpg), url(../img/contents/newyear2025_bgB.jpg), url(../img/contents/newyear2025_bgR.jpg); background-repeat:no-repeat; background-position: center top, center bottom, right 50px; background-size: contain, contain, 30%;}
.newyear2025 .txt{display: flex; flex-wrap: wrap; padding-top: 4%; padding-bottom: 15%;}
.newyear2025 .txt>*{flex:1 0 50%}
.newyear2025 .txt>p{flex-basis:100%; margin-bottom: 5%}
.newyear2025 .txt>div{font-size: 1.7rem;}


/** link **/
.link { padding-bottom: 6rem; }
.new-tab { position: relative; text-align: center; margin-top:5rem;}
.new-tab::before { content: ''; position: absolute; display: block; width: 100%; height: 53.5rem; top: 7.5rem; left: 0; background:linear-gradient(120deg, #EFDA19 0%, #16A672 70%); border-radius: 26.7rem 1rem 1rem 1rem; opacity: 30%; z-index: -2; }
.new-tab::after { content: ''; position: absolute; display: block; width: 100%; height: 100%; bottom: -2rem; left: 0; background: url(../img/contents/link-bg.png) no-repeat center bottom; z-index: -1; }
.new-tab .img img { font-size: 0; line-height: 0; border-radius: 1rem; box-shadow: 0 0.4rem 5rem rgba(0, 0, 0, 25%); overflow: hidden; }

/** 방청견학 **/
.ex-step01>li::before {top: calc(50% - 8.86rem);}
.ex-step01>li .con {position: relative; display: flex; justify-content: center; align-items: center; height: 100%; padding: 10rem 0 2rem 0; border: 1px solid #ddd ; border-top-width: 0; border-radius: 0rem 0rem 0.5rem 0.5rem;}
.ex-step01 li:nth-child(3) .con::before{top: 25px;}
.ex-step01 li:nth-child(n+4) .con {padding: 12rem 0 3rem 0;}
.ex-step01 li:nth-child(n+4) .con::before{top: 38px;}
.ex-step01>li .con::before{content: ''; position: absolute; left: 0; right: 0; top: 30px; margin: auto; width: 8rem; height: 7rem; background: url(/open_content/council/img/sub/step-ic.svg) no-repeat left top / 56rem;}
.ex-step01 li:nth-child(1) .con::before {background-position: 0 0;}
.ex-step01 li:nth-child(2) .con::before {background-position: -9rem 0;}
.ex-step01 li:nth-child(3) .con::before {background-position: -19rem 0;}
.ex-step01 li:nth-child(4) .con::before {background-position: -29rem 0;}
.ex-step01 li:nth-child(5) .con::before {background-position: -39rem 0;}
.ex-step01 li:nth-child(6) .con::before {background-position: -48.5rem 0;}

.trHover table tr:hover{background: #f5f5f5;}


/***************************************************************************************************************************/


@media all and (max-width:1024px) {
  .profile .intro img.intro_img {top: 4rem; width: 26rem;}
  .greeting .con-l .txt {width: 100%;}
  .greeting .con-l .txt::after {right: -10rem;}
  .greeting .con-r .imgbox::after {width: 34rem; height: 44rem;}
  .greeting .con-r .imgbox {width: 34rem; height: 44rem;}
}

@media screen and (max-width:800px){

 .greeting .title, .greeting .con-l .txt {text-align: center;}
 .greeting .con-l .txt::before {left: calc(50% - 2.2rem);}
 .member { flex-direction: column; }
 .member>li { width: 100%; }
 .history .con-box>ul>li>p { width: 8rem; }
 .location .con { flex-wrap: wrap; }
 .location .con .map-box { margin-bottom: 2rem; }
 .new-tab::before, .new-tab::after { width: 0; height: 0; }
 .group_m {flex-wrap: wrap;}
 .profile .intro {flex-direction: column; align-items: center; padding: 0rem 2rem 4rem 5rem;}
 .profile .intro img.intro_img {position: relative; top: -3rem; left: 0; width: 32rem;}
 .profile .intro>div {padding-left: 0;}
 .profile .intro .tit {display: flex; gap: 2rem; align-items: baseline;}
 .profile .intro .con dl {align-items: baseline;}
 .greeting .con-box {flex-direction: column; align-items: center;}
 .greeting .con-r {width: 74%;}
 .greeting .con-r .imgbox {width: 100%;}
 .greeting .con-r .imgbox::after {width: 100%;}
 .message {padding: 0 4rem 6rem;}
 .message p.title {padding-top: 7.5rem;}
 .message div.con-box {flex-direction: column; gap: 3.5rem; margin-top: 4rem;}
 .message div.con-box>div {width: 100%;}
 .message div.con-box>div p {margin-bottom: 2.5rem;}

 .ex-step01 {flex-wrap: wrap; gap: 5rem;}
 .ex-step01>li::before {right: 0; left: 0; top: auto; bottom: -3.5rem; transform: rotate(90deg);}
 .ex-step01.col3 li {width: 100%;}
 .ex-step01.col3 li:nth-child(3)::before {width: 1rem; height: 1.86rem;}
 .ex-step01>li .con{padding: 2rem;}
 .ex-step01 li:nth-child(n+4) .con {padding: 2rem;}
 .ex-step01>li .con::before{background-image: none;}

 }

@media screen and (max-width:480px){

 .member>li { padding: 2rem 1.5rem; height: auto; flex-direction: column; }
 .member .conbox { max-width: 100%; }
 .member .conbox .name { justify-content: center; }
 .history .con-box { padding:0 0 0 1rem; }
 .history .con-box>ul>li>p { padding-right: 3rem; }
 .history .con-box ul li div.con { margin-left: 3rem; }
 .history .con-box ul li div.con dl { flex-direction: column; }
 .history .con-box ul li div.con dl dt { margin-bottom: 1rem; }
 .location .con { padding:3rem 4rem; }
 .organ li.rank3>ul {gap: 1rem;}
 .organ li.rank3::before {width: 50%;}
 .organ02 li.rank2>ul {padding-top: 0; flex-direction: column;}
 .organ02 li.rank2>ul>li:before {top: -3rem; height: 3rem;}
 .profile .intro .tit {gap: 0; align-items: center; flex-direction: column;}
 .profile .intro {border-radius: 0 15rem 0 0;}
 .profile .intro::before {border-radius: 0 15rem 0 0;}
 .greeting .con-box {gap: 0em;}
 .greeting .con-r {width: 90%;}
 .greeting .con-r .imgbox::after {height: 80%; top: 1.8rem; border-radius: 13rem 1rem 1rem 1rem;}
 .greeting .con-r .imgbox img {height: 80%; border-radius: 12rem 1rem 1rem 1rem;}
 .greeting .con-r p.sign {margin-top: -2rem;}
 .newyear2025 .txt{padding-bottom: 30%;}
 .newyear2025 .txt>*{flex-basis:100%}
}