@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,
nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:'Montserrat','Noto Sans KR','Malgun Gothic','dotum','Arial',sans-serif}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,
nav,section {display: block}
body {line-height:1}
ol,
ul {list-style:none}
blockquote,
q {quotes:none}
blockquote:before,
blockquote:after,
q:before,
q:after {content:"";content:none}
table {border-collapse:collapse;border-spacing:0}
input:focus {outline:none}
a {color:inherit;text-decoration:none}

.inner {width:100%;max-width:1200px;margin:0 auto}
.dis-flex {display:flex;}
.sub-wrap .s-title {display:block;font-size:2.625rem;font-weight:600}

.nav ul {display:flex; margin:0;}
#header {justify-content:space-between;padding:2rem 0;border-bottom:1px solid #e8e8e8}
#header .logo {margin-right:2rem}
#header .nav {width:calc(100% - 160px)}
.nav > ul > li {display: flex;align-items: center;}
.nav > ul > li > a {display:block;padding:0 1rem;font-weight:600;transition:all .3s ease}
.nav > ul > li:hover > a {color:#00cc98}

#wrapper {position:relative}
.top-btn {display:none;position:fixed;z-index:99;right:20px;bottom:20px;width:50px;height:50px;border-radius:50%;background:#000}
.top-btn > a {display:block;color:#fefefe;text-align:center;line-height:50px;font-weight:600;font-size:.813rem}
#header {position:relative}
#header .hd-wrap {position:relative;justify-content:space-between;}
#header .all-menu {display:none;z-index:99;position:absolute;top:50%;right:0;width:50px;height:50px;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);cursor:pointer}
#header .all-menu span {position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);display:block;width:27px;height:3px;background-color:rgba(0,0,0,.8);transition-duration:.4s}
#header .all-menu span:nth-child(1) {top:.938rem}
#header .all-menu span:nth-child(2) {top:1.438rem}
#header .all-menu span:nth-child(3) {top:1.938rem}
#header .all-menu.on span:nth-child(1),
#header .all-menu.on span:nth-child(3) {top:1.75rem;left:0}
#header .all-menu.on span:nth-child(1) {transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}
#header .all-menu.on span:nth-child(2) {opacity:0}
#header .all-menu.on span:nth-child(3) {transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg)}
#header .all-menu.on span:nth-child(1),
#header .all-menu.on span:nth-child(3) {top:1.438rem;left:.75rem}

.m-nav {opacity:0;position:fixed;z-index:98;top:0;right:0;bottom:0;width:300px;height:100%;background:#fff;transform:translateX(80%);-webkit-transform:translateX(80%);-moz-transform:translateX(80%);transition-duration:.5s;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;box-shadow:.313em .313em 1.25em rgb(0 0 0 / 5%);-webkit-box-shadow:0.313em 0.313em 1.25em rgb(0 0 0 / 5%);-moz-box-shadow:0.313em 0.313em 1.25em rgb(0 0 0 / 5%);overflow:auto}
.m-nav > ul {padding-top:5rem}
.m-nav > ul > li {border-bottom:1px solid rgba(0,0,0,.05)}
.m-nav > ul > li > a {display:block;padding:1.25rem;font-size:1rem;font-weight:600} 
.m-nav.on {opacity:1;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0)}

.bn-wrap {display:flex;align-items:center;height:20rem;background-image:url('../img/banner.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat}
.bn-wrap h1 {display:inline-block;padding:.313rem .625rem;font-size:3.75rem;font-weight:600;color:#fefefe;background:rgba(0,0,0,.7)}

.section {padding:4rem 0}
.section .content-wrap {width:100%;justify-content:space-between;gap:2rem}
.section .main-content {width:100%}
.section .content > h5 {display:block;margin-bottom:1rem;font-weight:600;font-size:1.75rem;line-height:1.35}
.section .content > p {font-size:.875rem;line-height:1.5}
.section .news-list {margin:2rem 0}
.section .news-list > h5 {display:block;margin-bottom:1rem;font-size:1.125rem;font-weight:600}
.section .news-list > ul {margin-left:1.25rem}
.section .news-list > ul > li {margin-bottom:.625rem;list-style-type:disc;font-size:.875rem;line-height:1.35}
.section .news-list > ul > li > strong {font-weight:600}

.sub-wrap.members .s-title {margin-bottom:2rem;text-align:center}
.sub-wrap.members .member-list .s-title {text-align:left;font-size:2rem;line-height:1.35}
.sub-wrap.members .group {padding:4rem 0;background:rgba(0,0,0,.03)}
.sub-wrap.members .group img {width:100%}
.sub-wrap.members .member-list {padding:4rem 0}
.sub-wrap.members .list {width:calc(25% - 2%);padding:0 1%;margin-bottom:2.5rem}
.sub-wrap.members .list:last-child {margin-bottom:0}
.sub-wrap.members .list ul li {padding-bottom:.5rem;text-align:center}
.sub-wrap.members .list .image {margin-bottom:1rem}
.sub-wrap.members .member {flex-wrap:wrap;justify-content:flex-start}
.sub-wrap.members .member .image > img {width:100%;height:320px;object-fit:cover}
.sub-wrap.members .list .name {text-align:center;font-size:1.063rem;font-weight:500}
.sub-wrap.members .member-list.under .list .name {text-align:left}
.sub-wrap.members .list .position {color:#787878}
.sub-wrap.members .list .email {font-size:.875rem}
.sub-wrap.members .list .email > a > i {color:#00cc98}

.sub-wrap.project {padding:4rem 0}
.sub-wrap.project .proj-list {padding:2rem 0;flex-wrap:wrap;justify-content:flex-start;gap:2rem}
.sub-wrap.project .items {width:45%;padding:1.25rem;gap:1.25rem;border:1px solid #e8e8e8;align-items:center;background:#fefefe}
.sub-wrap.project .items .icon-area {width:20%;text-align:center}
.sub-wrap.project .items .icon-area > a > i {font-size:4.5rem;color:#00cc98}
.sub-wrap.project .items .txt-area {width:80%}
.sub-wrap.project .items .txt-area .tit {padding-bottom:.625rem}
.sub-wrap.project .items .txt-area .tit > a {font-weight:600;font-size:1.125rem}
.sub-wrap.project .items .txt-area > p {line-height:1.25;font-size:.938rem}

.sub-wrap.publi p {line-height:1.35}
.sub-wrap.publi ul li {margin-bottom:.5rem}
.sub-wrap.publi ul li:last-child {margin-bottom:0}
.sub-wrap.publi .profile-btm {padding:4rem 0}
.sub-wrap.publi .contents {margin-top:3rem}
.sub-wrap.publi .contents > strong {display:inline-block;position:relative;margin-bottom:1.5rem;font-weight:600;font-size:1.5rem}
.sub-wrap.publi .contents > strong::after {content:'';position:absolute;right:-13px;bottom:3px;width:7px;height:7px;border-radius:50%;background:#00cc98}

.sub-wrap.publi .pub-cont {margin-bottom:2.5rem}
.sub-wrap.publi .pub-cont .year {display:block;margin-bottom:1rem;font-weight:600;font-size:1.125rem}
.sub-wrap.publi .pub-cont .pub-list {margin-bottom:1.5rem}
.sub-wrap.publi .pub-cont .pub-list:last-child {margin-bottom:0}
.sub-wrap.publi .pub-cont .pub-list > strong {display:block;margin-bottom:.5rem;font-weight:500;line-height:1.35}
.sub-wrap.publi .pub-cont .pub-list > p {font-size:.938rem;color:#6e6e6e;margin-bottom:.5rem}
.sub-wrap.publi .pub-cont .pub-list .button {display:inline-block;margin-top:.625rem;padding:.5rem 2rem;background:#00cc98;font-size:.875rem;font-weight:600;color:#fefefe}




.footer {height:100px;background:rgba(0,0,0,.03);align-items:center}


@media screen and (max-width:1200px){
    .inner {max-width:90%}
    .sub-wrap.project .items {width:43%}
}

@media screen and (max-width:950px){
    #header .nav {display:none}
    #header .all-menu {display:block}
    .sub-wrap.members .list {width:calc(33.3% - 2%)}
}

@media screen and (max-width:920px){
    .sub-wrap.project .items {width:100%;padding:2rem 1rem}
}

@media screen and (max-width:768px){
    .section .content-wrap {flex-wrap:wrap}
    .bn-wrap h1 {font-size:3rem}
    .sub-wrap.members .list {width:calc(50% - 2%)}
}

@media screen and (max-width:540px){
    .bn-wrap {height:17rem}
    .sub-wrap.members .list {width:calc(100% - 2%)}
    .sub-wrap.members .list .image {width:60%;margin:0 auto 1rem}
    .sub-wrap.members .member-list.under .member {align-items:center}
    .sub-wrap.members .member-list.under .list {width:calc(50% - 2%);margin-bottom:1.5rem}
    
}

@media screen and (max-width:480px){
    .sub-wrap .s-title {font-size:2rem}
    .sub-wrap.project .items {padding:2rem;flex-wrap:wrap;justify-content:center}
    .sub-wrap.project .items .icon-area,
    .sub-wrap.project .items .txt-area {width:100%;text-align:center}
    .sub-wrap.members .member-list .s-title {font-size:1.75rem}
}

@media screen and (max-width:400px){
    .sub-wrap.members .list .image {width:100%}
}

@media screen and (max-width:375px){
    .bn-wrap h1 {font-size:2.625rem}
    .section .content > h5 {font-size:1.625rem}
    .sub-wrap.members .member-list.under .list {width:calc(100% - 2%);margin-bottom:1.5rem}
    .sub-wrap.members .member-list.under .list .name {text-align:center}
    .sub-wrap.members .member-list .s-title {font-size:1.5rem}
}

@media screen and (max-width:320px){
    .sub-wrap.project .items {padding:2rem 1.25rem}
}