@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
@font-face {
    font-family: 'Cafe24Moyamoya-Regular-v1.0';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/Cafe24Moyamoya-Regular-v1.0.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*reset css*/
*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}
html, body {height:100%;}
h1, h2, h3, h4, h5, h6 {font-size:inherit;line-height:inherit}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
ul,ol {list-style: none}
a, a:focus, a:active, a:hover {text-decoration: none; color: inherit;}
table {border-collapse:collapse;border-spacing:0;}

body{margin: 0;padding: 0; font-family: 'Noto Sans KR', sans-serif; color:#2c313d; font-size: 10px; word-break: keep-all;}
p {color: #555; font-size: 1.6em;}
.ff_moya {font-family: 'Cafe24Moyamoya-Regular-v1.0';}

/*공통 스타일*/
img {max-width: 100%; object-fit: cover;}
.flx {display: flex; flex-wrap: wrap;}
#wrap {width: 100%; max-width: 900px; margin: 0 auto;}
.inner {margin: 0 40px;}

.tit {flex-flow: column wrap; justify-content: center; align-items: center; position: relative; z-index: 5;}
.tit h5 {font-size: 1.3em; color: #aaa; margin-top: 8px; text-transform: uppercase;}
.tit h3 {font-size: 4em; line-height:1.2;}

.more_btn {padding: 5px 35px; font-size: 1.4em; border:1px solid #2e7551; background: #fff; color: #2e7551; display: inline-block;}

.content_type1 {align-items: center; justify-content: space-between;}
.content_type1 > div  {width: calc(50% - 15px);}
.content .txt_type1 {flex-flow:  column wrap;align-items: flex-end}
.content .txt_type1 h3 {font-size: 2em; font-weight: 700; margin-bottom: 10px;}
.content .txt_type1 h4 {width: 87px; background: #7234aa; color: #fff; text-align: center; line-height: 24px; font-size: 1.4em; margin-bottom: 10px; margin-left: 3px;}
.content .txt_type1 h5 {font-size: 1.4em; margin: 20px 0 10px; letter-spacing: -0.05em;}
.content .txt_type1 h5 b {font-weight: 700;}
.content .txt_type1 h5 span {display: inline-block; margin: 0 5px;}

/* 20240215 추가 : 공지안내 2열 정렬 */
.inner.col_type {display: flex; margin-top: 20px;}
.inner.col_type .content_type2 {width: 50%;}
.inner.col_type .content_type2 .txt_type1 {margin-top: 10px;}
/* 세로 top정렬 */
.inner.col_type.txtalign .content_type2 {flex-direction: column; position: relative;}
.inner.col_type.txtalign .content_type2 .txt_type1 {padding-bottom: 45px;}
.inner.col_type.txtalign .content_type2 .txt_type1 .more_btn {margin:0; position: absolute; bottom:0; right: 15px;}


/* 20240315 추가 : 계절별 포인트컬러 */
.color_winter {color: #6845cb;}
.color_spring {color: #dc408e;}
header .banner .txt h4.color_spring {background: #dc408e;}

/*헤더 + 배너*/
header {position: relative;}
header h1 {position: absolute; top:20px; right: 40px;}
header .banner .img img:last-child{display: none;}
header .banner .txt {position: absolute; top: 70px; left: 40px;}
header .banner .txt h4 {padding: 0 20px; background: #6845cb; border-radius: 2px; color: #fff; font-size: 1.9em;display: inline-block;}
header .banner .txt h2 {font-size: 8.4em; color: #014099; line-height: 1.2;  letter-spacing: -0.03em;  text-shadow: 3px 0px #fff;}
header .banner .txt h3 {margin:55px 0 0 145px; font-size: 2.7em;}
header .banner .txt h3 span {font-size: 1.75em;}

.banner_extra {position: relative; z-index: 3;}

/*공지안내 타이틀 부분*/
.main01 .tit {margin-top: -90px; padding-bottom: 40px; position: relative;} 


@media (max-width:899px) {
    header h1 {width: min(255px,40%);}
    header .banner .img img {display: none;}
    header .banner .img img:last-child{display: block;}
    header .banner .txt {display: none;}
}

@media (max-width:800px) {
    body {font-size: 9.5px;}
    .inner {margin: 0 30px;}
    .tit > img {width: min(77px,13vw);}
    header h1 {right: 30px;}
    /* 240215 추가 : 공지안내 2열 정렬 */
    .inner.col_type {display: block; }
    .inner.col_type .content_type2 {width:100%; align-items: center; justify-content: space-between;}
    .inner.col_type .content_type2 + .content_type2 {margin-top: 20px;}
    .inner.col_type .content_type2 .img, .inner.col_type .content_type2 .txt_type1 {width: calc(50% - 15px); }
    .inner.col_type .content_type2 .txt_type1 {margin-top: 0;}
    /* 세로 top정렬 */
    .inner.col_type.txtalign .content_type2 {flex-direction: row;}
    .inner.col_type.txtalign .content_type2 .txt_type1 .more_btn {position:inherit; margin-top: max(25px, 6%)}
    /* 글줄 수 많은 경우 하단여백X */
    .inner.col_type.txtalign .content_type2 .txt_type1 {padding-bottom: 0;}
}

@media (max-width:700px) {
    .content_type1 > div {width: 100%;}
    .content_type1 > .img {display: flex; flex-flow:row wrap; justify-content: center; margin-bottom: 10px;}
    /* 240215 추가 : 공지안내 2열 정렬 */
    .inner.col_type .content_type2 .img, .inner.col_type .content_type2 .txt_type1 {width: 100%;}
    .inner.col_type .content_type2 .img {display: flex; flex-flow:row wrap; justify-content: center; margin-bottom: 10px;}   
}

@media (max-width:500px) {
    body {font-size: 8.5px;}
    .inner {margin: 0 4%;}
    .content_type1 > .img img {width: 100%;}
    .content .txt_type1 h4 {width: 80px; margin-bottom: 6px; margin-left: 0;}
    .content .txt_type1 h5 span {display: inline-block; margin: 0 3px;}
    header h1 {top:2%; right: 4%;}
    /* 240215 추가 : 공지안내 2열 정렬 */
    .inner.col_type .content_type2 .img img {width: 100%;}
}


/*공지안내*/
.main01 {background: url(images/common/main01_2.png) bottom right / auto repeat-y; padding-bottom: 55px; position: relative;}
.main01 .content {padding: 0 15px; position: relative; z-index: 2;}
.main01 .content .more_btn {margin-top: 45px;}
.main01 .main01_bg {position: absolute; left:0; bottom:0; z-index: 1;}
.main01 .txt b {font-weight: bold;}
.main01 .txt b.color {color: #e70000;}

/*협회소식*/
.main02 {padding: 50px 0 70px; background: #eef1f7; position: relative;}
.main02 .tit {padding-bottom: 45px;}
.main02 .content {padding: 0 15px;}
.main02 .content .txt h3 {padding-left: 15px; position: relative;}
.main02 .content .txt h3::before {content:""; position: absolute; left: 0; top:6px; height: 20px; width: 4px; background: #0450bb;}
.main02 .content .txt p {letter-spacing: -0.02em;}
.main02 .content .more_btn {border-color: #1151ab; color: #1151ab; margin-top: 20px;}
.main02 .main02_bg {position: absolute; top:20px; left: 40px;}
.main02 .main02_bg2 {left: auto; right: 40px;}
/* 240215 추가 : 협회소식 1개 이상 */
.main02 .content + .content {margin-top:30px;}


/*지부소식*/
.area1 {background: #434548;}
.area2 {background: #507dd7;}
.area3 {background: #79bd48;}
.area4 {background: #204b8b;}
.area5 {background: #e89927;}
.area6 {background: #7265dd;}
.area7 {background: #d5345b;}
.area8 {background: #249f99;}
.area9 {background: #e36c06;}
.area10 {background: #fc7b84;}
.main03 {padding-top: 50px; background: #f7ece0;}
.main03 .tit {padding-bottom: 50px; position: relative;}
.main03 .content {padding: 10px 0 50px; background: #eeb28e;}
.main03 .content .inner {background: #fff; border-radius: 10px; padding: 35px 20px 35px 25px ;}
.main03 .content li {padding: 12px 12px 12px 0; border-bottom: 1px dashed #e1e1e1;}  
.main03 .content li:last-child {border-bottom: 0;}
.main03 .content .flx {align-items: center; justify-content: space-between;}
.main03 .content .flx .txt {width: calc(100% - 31px);}
.main03 .content h4 {font-weight: 400; font-size: 1.8em; display: flex; flex-flow: row wrap; align-items: flex-start;}
.main03 .content h4 span {padding: 1px 0; width: 82px; text-align: center; border-radius: 6px; display: inline-block; margin-right: 5px; font-weight: 500; color: #fff;}
.main03 .content h4 b {width: calc(100% - 90px);}
.main03 .content .btn {padding: 5px; border:1px solid #c2002f;}
.main03 .main03_bg {position: absolute; bottom:0; left: 40px;}
.main03 .main03_bg2 {left: auto; right: 40px;} 

/*오피니언*/
.main04 {padding: 50px 0; background: #efe4f9;}
.main04 .tit {padding-bottom: 50px; position: relative;}
.main04 .main04_bg {position: absolute; bottom:0; left: 40px;}
.main04 .main04_bg2 {left: auto; right: 40px;} 
.main04 .content {padding: 30px 15px 30px 30px; background: #fff; margin-bottom: 2px;}
.main04 .content .txt_type1 h3 {font-size: 2.2em;}
.main04 .content .txt_type1 p {letter-spacing: -0.025em;}
.main04 .more_btn {border-color: #7234aa; color: #7234aa; margin-top: 30px;}

/*블로그소식*/
.main05 {padding: 40px 0 50px; background: #45a675; position: relative;}
.main05 .tit {padding-bottom: 30px;}
.main05 .tit h3 {color: #fff; text-align: center;}
.main05 .tit h3 span {color: #ffd88d;}
.main05 .content {position: relative; z-index: 2;}
.main05 .content .txt > ul > li:not(:last-child) {padding-bottom: 20px; margin-bottom: 20px; border-bottom:1px dashed #fff}
.main05 .content .txt b {font-size: 3em; font-weight: 200; font-style: italic; color: #ffd88d; width: 35px; line-height: 30px;}
.main05 .content .txt ul ul {width: calc(100% - 35px); padding-left: 10px;}
.main05 .content .txt ul ul li {font-size: 2em; font-weight: 700; color: #fff; display: block;}
.main05 .content .txt span {font-size: 0.75em; font-weight: 300; font-style: italic; color: #ffd88d;}
.main05 .content .img {justify-content: space-between;}
.main05 .content .img img {width: min(188px,49%);}
.main05 .main05_bg {position: absolute; right:0; bottom:0; z-index: 1;}

/*유튜브*/
.main06 {padding: 40px 0 50px; background: url(./images/common/main05_1.jpg) no-repeat bottom center / cover;}
.main06 .tit {padding-bottom: 30px;}
.main06 .tit h3 {color: #fff; text-align: center;}
.main06 .tit h3 span {color: #912ce9;}
.main06 .content {justify-content: center;}

/*푸터*/
footer {background: #242a29; padding: 35px 0;}
footer .inner {justify-content: space-between;}
footer .inner .info {color: #fff; opacity: 0.3; font-size: 1.3em;}
footer .inner .sns a:not(:last-child) {margin-right: 20px;}

@media (max-width:899px) {
   
}

@media (max-width:800px) {
    .main01 .tit {padding-bottom: 30px; margin-top: -9%;} 
    .main01 .content {padding: 0;}
    .main01 .content .more_btn {margin-top: max(25px,6%);}

    .main02 {padding: 40px 0 60px; }
    .main02 .tit {padding-bottom: 40px;}
    .main02 .content {padding: 0;}
    .main02 .main02_bg {left: 30px; max-width: 30%;}
    .main02 .main02_bg2 {left:  auto; right: 30px; max-width: 30%;} 

    .main03 {padding-top: 40px;}
    .main03 .tit {padding-bottom: 40px; }
    .main03 .content {padding: 10px 0 40px;}
    .main03 .content .inner {padding: 30px 15px 30px 20px;}
    .main03 .content li {padding: 10px 10px 10px 0;}  
    .main03 .content li:last-child {border-bottom: 0;}
    .main03 .content h4 span {width: 80px;}
    .main03 .main03_bg {left: 30px; max-width: 25%;}
    .main03 .main03_bg2 {left: auto;right: 0px; max-width: 25%;} 

    .main04 {padding: 40px 0;}
    .main04 .tit {padding-bottom: 40px; }
    .main04 .main04_bg {left: 30px; max-width: 25%;}
    .main04 .main04_bg2 {left:  auto; right: 30px; max-width: 25%;} 
    .main04 .content {padding: 25px 10px 25px 25px;}
    .main04 .content .txt {width: 100%;}
    .main04 .more_btn {margin-top: 25px;} 

    .main05 {padding: 30px 0 40px; }
    .main05 .tit {padding-bottom: 25px;}
    .main05 .content .txt {width: 60%;}
    .main05 .content .img {width: 38%;}
    .main05 .content .txt > ul > li:not(:last-child) {padding-bottom: 15px; margin-bottom: 15px;}
    .main05 .content .txt b {line-height: 1.2;}
    .main05 .content .txt ul ul {padding-left: 6px;}
    .main05 .content .img img {width: min(188px,49%);}
    .main05 .main05_bg {position: absolute; right:0; bottom:0; z-index: 1;}
    footer .inner .sns {width: 100%; justify-content: center; margin-top: 5%;}
}

@media (max-width:500px) {

    .main01 .tit {padding-bottom: max(20px,6%); } 

    .main02 {padding-top:max(20px,6%); padding-bottom: max(30px,10%);}
    .main02 .tit {padding-bottom: max(20px,6%);}
    .main02 .main02_bg {left: 4%; top:4%;}
    .main02 .main02_bg2 {left: auto;right: 4%;} 

    .main03 {padding-top: max(20px,6%);}
    .main03 .tit {padding-bottom: max(20px,6%); }
    .main03 .content {padding-top: 3%; padding-bottom: max(20px,6%);}
    .main03 .content .inner {padding: 6% 3%;}
    .main03 .content li {padding: 2% 2% 2% 0;}  
    .main03 .content h4 span {width: 70px;}
    .main03 .main03_bg {left: 4%;}
    .main03 .main03_bg2 {left:  auto;right: 4%;} 

    .main04 {padding: max(20px,6%) 0;}
    .main04 .tit {padding-bottom: max(20px,6%); }
    .main04 .main04_bg {left: 4%;}
    .main04 .main04_bg2 {left:  auto;right: 4%;} 
    .main04 .content {padding: 4% 2.5% 2.5% 2.5%;}
    .main04 .more_btn {margin-top: 4%;}

    .main05 .content .txt, .main05 .content .img {width: 100%;}
    .main05 .content .img {justify-content: center; margin-top: 3%;}
    .main05 .content .img img {max-width: 48%; margin: 0 1%;}
}