/*IBM Plex Sans KR: CSS classes*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200;300;400;500;600;700&display=swap');

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

font-family: 'Noto Serif KR', serif;
.ibm { font-family: "IBM Plex Sans KR", sans-serif;  font-weight: 400;  font-style: normal;}
.rixrak {font-family: rixrak-serif-pro, sans-serif; font-weight: 700;font-style: normal;}
.notoSerif{font-family: 'Noto Serif KR', serif;}


/*reset*/
body{overflow-x: hidden;}
body, h1, h2, h3, h4, h5, h6, p, ul, li,button,dl,dt,dd,form,fieldset,legend,table,thead,tbody,tfoot,tr,td,th,span{
    font-family: 'Noto Sans KR', sans-serif; font-weight: 400; margin:0; padding:0; word-break:keep-all; font-size: 20px; }
em,address{font-style:normal;}
ul, li{list-style:none;}
button{border:0;background:none;cursor:pointer;}
button>span{-ms-transform: translate(0px, -0.5px);}
*{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-text-size-adjust:none;/*ios 확대방지*/}
a img{border:0;}
fieldset{border:0;}
legend{display:none;}
body,html,button,select,input{/* font-family: 'Poppins', sans-serif; */font-size:15px;color:#000;line-height: 1.8;letter-spacing: 0;}
a{text-decoration:none;color:#333;}
fieldset{border:0;}
legend{display:none;}
table{width: 100%;table-layout:fixed; margin:0; padding:0; border:0; border-collapse: collapse; border-spacing: 0;}
table caption{display:none;}
a:active, a:focus, button:focus, button:active{outline: none !important;}
.text_line {outline: 1px solid #fff; color:#000}
.flex {display:flex;justify-content: space-between;}
/* 스크롤 막기 CSS */
.notScroll {overflow: hidden;width: 100%;height: 100%;touch-action:none;}
.img-responsive {display:block;max-width:100%;height:auto;}

/*공통*/
#header{width: 100%;height: 150px;border-bottom: 1px solid #000;position: relative;z-index: 110;background: #fff;}
#header .wrap{position: relative;display: flex;align-items: center;justify-content: space-between;padding: 30px 0;height: 100%;overflow: hidden;width: 95%;margin:0 auto;}
#header .l_text {color: #000;}
#header .l_text b {display: block;font-size: 18px;font-family: "IBM Plex Sans KR", sans-serif;  font-weight: 600;}
#header .l_text p {display: block;font-size: 18px;font-family: "IBM Plex Sans KR", sans-serif;  font-weight: 400;}
#header.fixed {position: relative;/*position:fixed;top: 0;*/}

.logo a{display:block; font-size: 0;line-height: 0;width: 110px;height: 80px;background: url(../img/logo.png) no-repeat 50%;}
.right_menu {margin-right: 60px;}
.right_menu p{font-size: 18px;font-family: "IBM Plex Sans KR", sans-serif; margin-right: 35px;}
.right_menu p b {font-size: 18px;font-family: "IBM Plex Sans KR", sans-serif; font-weight: 600;}

.nav_close {display:none;}
.nav_open {position: fixed;right:2.5%;top:38px;/*margin-left: 840px;top: 38px;*/font-size: 0;width: 75px;height: 75px;display: block;background: url("../img/menu.png") no-repeat 50%;z-index: 160;transition:.4s;}
.nav_open:after {position: fixed;content: "";right:2.5%;top: 38px;width: 75px;height: 75px;display: block;background: url("../img/menu_txt.png") no-repeat 50%;z-index: 100;transition:0.4s;/*opacity: .3;*/}
.nav_open.nav_close {background: url("../img/menu_close.png") no-repeat 50%;background-size: cover;}
.nav_open.nav_close:after {background: url("../img/menu_txt_close.png") no-repeat 50%;background-size: cover;}
.nav_open.ov:after {animation:nav_open_ani 3s infinite linear;}
@keyframes nav_open_ani{
    100% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.nav_open:hover::after {opacity: 1;transition:1s;}


.nav_open.bg_c {background:#000; transition:0.4s;}
.nav_open.bg_c:hover {border:none;}


.underline {text-decoration: underline;}
.fw_100 {font-weight: 100 !important;}
.fw_200 {font-weight: 200 !important;}
.fw_300 {font-weight: 300 !important;}
.fw_400 {font-weight: 400 !important;}
.fw_500 {font-weight: 500 !important;}
.fw_600 {font-weight: 600 !important;}
.fw_700 {font-weight: 700 !important;}
.fw_800 {font-weight: 800 !important;}
.m {display: none;}

.navi{position:fixed;z-index: -1;top: -1000px;opacity: 0;transition:right .5s ease-in-out, opacity .1s ease-in-out;width: 100%;height: 100%;right: 0;transition: .5s;}
.navi.on{right:0;top: 150px;display:block;opacity:1;overflow-y: auto;transition:right .5s ease-in-out, opacity .5s ease-in-out;transition: .5s;z-index: 100;}

/*article2*/
.article2 {background: #fff;padding: 3% 4% 2% 4%;margin-top:0;box-shadow: 0 30px 60px #00000014;/* min-height: 70vh; */}
.nav_close {display:none;}

.inner2{width:100%;margin:0 auto}

.article_text2 {text-align: center;margin-top: 3%;margin-left:2%}
.article_text2 span { display: block; padding: 5px 0 }
.article_text2 span.l_title2 {font-size: 18px; color: #4f3118; text-align: left;font-weight:700;}
.article_text2 span.l_stitle2 {font-family: 'Noto Sans KR', sans-serif;font-size: 13px;color: #555;text-align: left;min-height: 45px;line-height: 1.4;letter-spacing:0.02em}
.article_text2 span.l_stitle2 i{font-style:italic; color: #7a7a7a;letter-spacing:0.03em}
.articlelist {text-align:center;margin: 0;}
.articlelist li {display:inline-block;padding: 0 0;vertical-align:top;margin: 2%;}
.articlelist .pdf_img {text-align: center;margin-top: 1%;margin-right: 2%;}
.articlelist .pdf_img img {box-shadow: -3px 8px 10px #0000001a;}
.articlelist .pdf_img a {text-align: center;display: block;}
.articlelist .pdf_img a p {text-align:center;color:#06b59d;font-size:17px;margin-top: 12px;}
.articlelist a {display:block; margin-bottom:8%;}
.articlelist a h3 {font-family: rixrak-serif-pro, sans-serif;font-weight: 700;font-style: normal; color:#000; font-size:16px; text-align:left;}
.articlelist a:hover h3 {color: #06b59d;}
.articlelist a p {text-align:left; color:#7d7d7d; margin-top:5px; font-size:16px; }
.articlelist a:hover p {color: #000000;}
#aside {position: fixed;display: flex;right: -1px;top: 10%;background: transparent;height: 100vh;margin: auto;flex-direction: column;z-index: 99;align-items: center;justify-content: center;transition: .4s;overflow:hidden;text-align: center;}
#aside span {display: flex;justify-content: center;align-items: center;font-size: 12px;font-weight: 600;padding:10px;color: #504d4d;border: 1px solid #cbcaca;transition: .3s;width: 50px;height: 50px;cursor:pointer;}
#aside span:first-child {border-bottom: none;}
#aside.show {right: 10px;transition: .5s}

/*footer*/
.footer {background: #000000;padding: 3% 0;}
.footer .inner_w {width: 100%;text-align: center;}
.footer .copyright p{color: #7e7e7e; font-size:14px;}
.footer .copyright .f_sns {padding-bottom:2%;margin-left: 0;}
.footer .copyright .f_sns a {display:inline-block;padding: 0;margin: 10px 15px 0;opacity: 1;width:40px;}
.footer .copyright .f_sns a img {width:100%;}
.footer .copyright .f_sns a:hover {opacity:0.5;}
.footer .copyright .f_logo {margin-bottom:15px;}


/*RW*/
@media screen and (max-width:1920px) {
      /*#header .wrap{padding: 30px 60px 30px 50px;}
    .nav_open,
    .nav_open:after {left:auto; margin-left: 0; right: 60px;}*/
}
@media screen and (max-width:1680px) {
    .article2 {padding: 3vw 5vw 2vw;}
    .articlelist li {margin:1%; min-width:14%;}
}
@media screen and (max-width:1440px) {
    .articlelist .pdf_img a {margin-bottom: 0;}
	.articlelist a h3 {font-size:14px;}
    .articlelist a p {font-size:14px;}
}
@media screen and (max-width:1366px) {
	#aside{top:20%}
}
@media screen and (max-width:1280px) {
    .right_menu p, #header .l_text b, .right_menu p b, #header .l_text p {font-size:16px;}
    #header {height: 11.5vw;}
    #header .wrap{padding: 6vw 6vw 6vw 5vw;}
    .logo a {background-size: 100%;width: 80px;}
    .nav_open,.nav_open:after {top: 2vw;right: 3vw}
    .right_menu {margin-right:3vw;}
    .navi.on {top: 11vw;}
}
@media screen and (max-width:1180px) {
    #header.fixed { position: relative;}
	.article2{padding: 3% 1% 2% 1%;}
	.articlelist li {margin:0.5%; min-width:8%;}
	.articlelist .pdf_img img {width:90%;box-shadow: -3px 8px 10px #0000001a;}
	.articlelist .pdf_img a p {font-size:14px;margin-top: 10px;}
}
@media screen and (max-width:1024px) {
    .right_menu p, #header .l_text b, .right_menu p b, #header .l_text p {font-size:15px;}
	#aside span{width:40px; height:40px; font-size:11px}
	.footer {background: #000000;padding: 5% 0;}
	.article2 {padding: 5% 5%;}
    .articlelist .pdf_img img {max-width:90%}
    .navi.on {position:fixed; top: 0; z-index:150;}
    .navi .article2 {width: 320px;margin-left: calc(100% - 320px);}
    .articlelist {text-align:left;}
    .navi.on:before {position:fixed; width:100%; height:100%; background: #00000066; content:""; display:block; z-index:-1;}
}
@media screen and (max-width:980px) {
}
@media screen and (max-width: 768px) {
    #header .l_text {display:none;}
    .logo a {width: 10vw;}
    #header .wrap {padding: 5vw 5vw 5vw 5vw;}
    .nav_open {width: 8vw;height: 8vw;background-size: cover;}
    .nav_open:after {display:none;}
    .right_menu p, #header .l_text b, .right_menu p b, #header .l_text p {font-size:12px;}
}
@media screen and (max-width: 600px) {
    .articlelist {text-align:left;}
    .articlelist a h3 {font-size: 3.3vw;}
    .articlelist a p {font-size: 2.8vw;}
     .footer p{font-size:2vw}
     .footer img {max-width:50vw}
     .footer .copyright .f_sns a {margin: 2vw;}
     .footer .copyright .f_sns img {max-width: 9vw;}

}
@media screen and (max-width: 540px) {
    .nav_open, .nav_open:after {width: 14vw;height: 14vw;top: -1.5vw;right: -0.5vw;}
	.footer .copyright p{font-size:12px;}
}
@media screen and (max-width: 414px) {
	#aside span{width:30px; height:30px; font-size:9px}
	.footer .copyright p{font-size:11px;}
}
@media screen and (max-width: 375px) {
}