@charset "UTF-8";

@import url(font.css);

*, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; }
html { overflow: hidden; overflow-y: scroll; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 10px; }
body {margin: 0; padding: 0; font-size: 1.6rem; line-height: 1.6875; font-weight: 400; color: #222; letter-spacing: -1px; font-family: 'Pretendard GOV', Malgun Gothic, AppleSDGothicNeo-Regular, sans-serif; }
header, footer, main, section, article, nav, aside { display: block; }
ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin: 0; padding: 0; }
fieldset { display: block; margin: 0; padding: 0; border: 0 none; }
input, select { max-width: 100%; vertical-align: middle; line-height: 1.9rem; height: 1.9rem; }
input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0; border: 1px solid #ddd; }
input { height: 1.9rem; line-height: 1.9rem; }
input:-moz-read-only, input:disabled { background: #fafafa; }
input:read-only, input:disabled { background: #fafafa; }
input[readonly] { background: #fafafa; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; }
address, em, i { font-style: normal; }
strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0 none; background: none; cursor: pointer; }
input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
img { max-width: 100%; border: 0 none; font-size: 0; vertical-align: middle; }
table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
/* IR 효과 */
.ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; }
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; }
/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_su { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }
/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.blind { overflow: hidden; position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; line-height: 0; margin: -1px; }
/*스크롤바*/
body::-webkit-scrollbar { width: 6px; height:0px;}
body::-webkit-scrollbar-thumb { height: 25%; background: #0194e1; border-radius: 10px;}
body::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); }
/* 접근성을 위한 대체 텍스트(alt 값이 너무 길 때) */
#skip_nav { position: absolute; left: 0; top: -1000px; width: 100%; height: 0px; z-index: 1000; line-height: 0px; font-size: 0px; }
#skip_nav a { display: block; text-align: center; width: 100%; line-height: 0px; font-size: 0px; }
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active { position: absolute; left: 0px; top: 1000px; padding: 8px 0; display: block; height: 30px; background: #20262c; font-size: 12px; font-weight: bold; line-height: 18px; color: #fff; }
/* optiopm */
.parallax__progress progress { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 5px; border: none; background: transparent; }
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background: #0194e1; }
progress::-moz-progress-value { background: #0194e1; }

/* header */
#header {position: absolute;/*top: auto;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%); */top: 0;width: 100%;padding: 1em 2em;z-index: 60;position: fixed;}
#header .logo a { display: block; }
#header .logo a>* { display: inline-block; vertical-align: middle; width: 80px; filter: brightness(10);}
.fix #header .logo a>* {filter: brightness(0);-webkit-transition: 0.2s;transition: 0.2s;}

.fix #header {background: #fff;box-shadow: 0px 0 10px 0px #353535;transition: .4s;}
.fix #gnb__nav .menuBox>li {color: inherit;}
.header {max-width: 1280px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.gnb__wrap { margin-left: 50px;text-align: center; }
.menu-trigger {display: none;}
#header.menu .gnb_wrap {height: 100vh; opacity: 1; right: 0; visibility: visible; width: 500px;padding: 50px 5%;overflow: auto;}
#gnb__nav .depth {position: absolute;z-index: 110;top: 100%;left: 50%;width: 180px;margin-left: -90px;padding: 22px 0 23px 0;background-color: #1e7ddf;display: none;border-radius: 15px;}
#gnb__nav .depth a { font-size: 17px; font-weight: 300; color: #777; letter-spacing: -0.5px; }
#gnb__nav .menuBox>li.active { color: #fff; }
#gnb__nav .menuBox>li.active a { color: #fff; }
.fix #gnb__nav .menuBox>li.active > a { color: #1e7ddf; }
#gnb__nav .menuBox .depth>li {line-height: 45px;}
#gnb__nav .menuBox .depth>li:hover {background: #1d446d;} 
#gnb__nav .menuBox .depth>li a {font-size: 20px;font-weight: 400;color: #fff;display: block;}
#gnb__nav .menuBox>li {position: relative;height: 60px;font-size: 24px;font-weight: 600;line-height: 60px;display: inline-block;color: #fff;}
.menuBox {display: flex;justify-content: space-around;width: 680px;}
#hnb:after { display: block; clear: both; content: ""; }
#hnb .dark, #hnb .size {filter: invert(1);}
.fix #hnb .dark, .fix #hnb .size {filter: invert(0);}
#hnb>* { float: left; line-height: 3.6rem; }
#hnb>a {-webkit-transition: 0.2s;transition: 0.2s;width: 40px;margin-left: 1.5rem;padding: 5px;box-sizing: content-box;margin-top: -3px;border-radius: 100%;}
#hnb>a:hover, #hnb>a:focus, #hnb>a.active {color: #fff;background: #000;border-radius: 100%;}
#hnb>a:hover img, #hnb>a:focus img, #hnb>a.active img {filter: invert(1);}
#hnb>a+a {margin-left: 1.5rem;}
#hnb .search {border: 1px solid #fff;border-radius: 60px;background-color: #fff;-webkit-transition: 0.2s;transition: 0.2s;}
.fix #hnb .search {border: 1px solid #b5b5b5;}
.search>.searchBar {padding: 0;transition: .2s;margin-top: -5px;margin-right: 2px;text-indent: 12px;font-size: 15px;width: 200px;border: none;outline: none;border-radius: 50px;}
.search>.searchIcon { padding-right: 10px; border: none; cursor: pointer; font-size: 1.5em; margin-top: 5px; outline: 0;}
.gnb_bg { position: fixed;right: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);opacity: 0;transition: 0.5s; }
.gnb_bg.active {opacity: 1;width: 100%;height: 100%;z-index: 50;}
.gnb_wrap::-webkit-scrollbar { width: 4px; height:0px;}
.gnb_wrap::-webkit-scrollbar-thumb { height: 20%; background: #b3b3b3; border-radius: 10px;}
.gnb_wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); }
.gnb_wrap { position: fixed; right: -50%; top: 0; height: 0; width: 0; background: #fff; padding: 0 13rem 0 20rem; overflow: hidden; visibility: hidden; opacity: 0; -webkit-transition: right 0.4s, opacity 0.4s; transition: right 0.4s, opacity 0.4s; }
#gnb ul:after { display: block; clear: both; content: ""; }
#gnb li a {font-size: 19px;color: #1e7ddf; font-weight: 600; }
#gnb li a:hover .sub_txt, #gnb li a:focus .sub_txt {text-decoration: underline;}
#gnb li.active a { color: #0194e1; background-size: 100% 3px; opacity: 1; }
#gnb li div {font-size: 21px;font-weight: 800;}
#gnb .inner_li { margin-bottom: 15px; }
#gnb .inner_li:nth-of-type(2) div {margin-top: 30px;}
#gnb .inner_li:nth-of-type(3) div {margin-top: 30px;}
#gnb .inner_li:nth-of-type(4) div {margin-top: 30px;}
#gnb .depth li {border-bottom: 1px solid #ddd;padding-bottom: 15px;margin-top: 15px;}
#gnb .depth .sub_txt {display: block;font-size: 17px;font-weight: 400;line-height: 1.4;color: #333;text-align: left;}
#gnb li { width: 100%; }

/* common */
.container { width: 128rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }
.container:after { display: block; clear: both; content: ''; }

/* footer */
#footer {position: relative;}
#footer .f_logo {display: table-cell; vertical-align: middle; }
#footer .related {display: flex;gap: 15px;flex-wrap: wrap;justify-content: flex-end;}
#footer .related a {width: 5.5rem;height: 5.5rem;line-height: 7rem;text-align: center;background: #fff;border-radius: 50%;}
#footer .info .adr {color: #fff;font-weight: 200;}
#footer .info .copy {margin-top: 25px;}
#footer .info .adr:after { display: block; clear: both; content: ""; }
#footer .info .adr .issn { margin-right: 0.5rem; }
#footer .info ul { margin-top: 8px; }
#footer .info ul:after { display: block; clear: both; content: ""; }
#footer .info ul li { float: left; position: relative; padding-right: 1rem; margin-right: 1rem; line-height: 1.5; }
#footer .info ul li:after { position: absolute; content: ""; width: 1px; height: 14px; background: #898989; right: 0; top: 0.4rem; }
#footer .info ul li:last-of-type { margin-right: 0; padding-right: 0; }
#footer .info ul li:last-of-type:after { display: none; }
#footer .info ul li a:hover, #footer .info ul li a:focus { text-decoration: underline; }
.footerLink {display: flex;flex-direction: column;gap: 10px;}
.footerLink img {height: 50px;}
.f_list {padding: 4rem 0;}
.f_list .container {display: flex;justify-content: space-evenly;}
.f_list .container:after {display: none;}
.f_top_wrap {padding: 5rem 0;background: #343434;}
.f_top { display: flex; justify-content: space-between; }
.f_bottom { display: flex; justify-content: space-between; border-top: 1px solid #000; padding-top: 30px; margin-top: 20px; align-items: flex-end;}
.subscribeBtn {background-color: #fff;border-radius: 50px;font-size: 2.3rem;padding: 10px 20px;border: 2px solid #000;width: 27%;font-weight: 300;}
.expBtn {background-color: #fff;border-radius: 50px;font-size: 2.3rem;padding: 10px 20px;border: 2px solid #000;width: 27%;font-weight: 300;}
.pdf_down {background-color: #fff;border-radius: 50px;font-size: 2.3rem;padding: 10px 20px;border: 2px solid #000;width: 27%;font-weight: 300;text-align: center;}

/* 지난호보기 */
#last_view { width: 100%;text-align: right;position: relative; }
#last_view .scroll {width: 150px;padding: 8px 20px 8px 8px; font-size: 0.95em; border: 1px solid rgba(255, 255, 255, 0.2);appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../img/common/scroll_arr.png) no-repeat 90% center; color: #fff; text-align: left; height: auto; text-indent: 8px;cursor: pointer;}
#last_view .scroll::-ms-expand { display: none; }
#last_view .scroll option:checked { background-color: #3498db; color: #fff; }
#last_view .scroll:hover, #last_view .scroll:focus { outline: none; box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
#last_view .scroll option {color: #fff; background: #000;}

/* 팝업 */
.subscribeBtn:hover, .subscribeBtn:focus, .expBtn:hover, .expBtn:focus, .pdf_down:hover, .pdf_down:focus {background-color: #1d446d;color: #fff;}
.subscribeModal { width: 100%; height: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.801); position: fixed; top: 0px; left: 0px; z-index: 7000; display: none; }
.subscribeModal .subscribeBox { width: 600px; height: auto; }
.subscribeModal .subscribeBox .subscribeTitle { width: 100%; height: 60px; background-color: #385e94; font-weight: bold; text-align: center; line-height: 60px; color: #fff; font-size: 1.4em; }
.subscribeModal .subscribeBox .subscribeContents { width: 100%; height: auto; padding: 40px; box-sizing: border-box; background-color: #FFFFFF; }
.subscribeModal .subscribeBox .subscribeContents .explantionText { width: 100%; height: auto; text-align: center; box-sizing: border-box; padding: 30px 0px; border-bottom: 1px solid #ccc; line-height: 1.5em; font-size: 20px; }
.subscribeModal .subscribeBox .subscribeContents .alertBox { color: #A72E2E; width: 100%; height: auto; text-align: center; box-sizing: border-box; padding: 30px 10px; line-height: 1.5em; font-size: 20px; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox { width: 100%; height: auto; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox { width: 100%; height: 50px; border-radius: 10px; background-color: #385e94; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox .emailIcon { width: 40PX; height: 25px; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox .emailText { color: #FFFFFF; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox .emailInputOut { width: 350px; height: 30px; background-color: #fff; text-align: center; line-height: 27px; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox .emailInputOut .emailInput { width: 95%; height: 90%; border: none; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .chooseBox { width: 100%; height: auto; box-sizing: border-box; padding: 15px; background-color: #ddd; margin: 20px 0px; line-height: 1.5em; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes { color: #385e94; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes:hover { color: #7B6825; text-decoration: underline; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes:active { color: #006DB6; text-decoration: underline; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .btnAll { width: 100%; height: 40px; padding: 30px 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .btnAll .subscribeOkBtn { width: 150px; height: 40px; border: none; border-radius: 20px; color: #fff; background-color: #385e94; cursor: pointer; font-size: 16px; }
.subscribeModal .subscribeBox .subscribeContents .emailInputBox .btnAll .subscribeExitBtn { margin-left: 20px; width: 150px; height: 40px; border: none; border-radius: 20px; color: #fff; background-color: #888; cursor: pointer; font-size: 16px; }
.subscribeModal .subscribeCancelBox { width: 600px; height: auto; display: none; }
.subscribeModal .subscribeCancelBox .subscribeTitle { width: 100%; height: 60px; background-color: #385e94; font-weight: bold; text-align: center; line-height: 60px; color: #fff; font-size: 1.4em; }
.subscribeModal .subscribeCancelBox .subscribeContents { width: 100%; height: auto; padding: 40px; box-sizing: border-box; background-color: #FFFFFF; }
.subscribeModal .subscribeCancelBox .subscribeContents .explantionText { width: 100%; height: auto; text-align: center; box-sizing: border-box; padding: 30px 0px; border-bottom: 1px solid #ccc; line-height: 1.5em; font-size: 20px; }
.subscribeModal .subscribeCancelBox .subscribeContents .alertBox { color: #A72E2E; width: 100%; height: auto; text-align: center; box-sizing: border-box; padding: 30px 10px; line-height: 1.5em; font-size: 20px; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox { width: 100%; height: auto; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox { width: 100%; height: 50px; border-radius: 10px; background-color: #385e94; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox .emailIcon { width: 40PX; height: 25px; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox .emailText { color: #FFFFFF; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox .emailInputOut { width: 350px; height: 30px; background-color: #fff; text-align: center; line-height: 27px; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox .emailInputOut .emailInput { width: 95%; height: 90%; border: none; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .chooseBox { width: 100%; height: auto; box-sizing: border-box; padding: 15px; background-color: #ddd; margin: 20px 0px; line-height: 1.5em; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes { color: #385e94; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes:hover { color: #7B6825; text-decoration: underline; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .chooseBox .subscribeChooes:active { color: #006DB6; text-decoration: underline; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .btnAll { width: 100%; height: 40px; padding: 30px 0px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .btnAll .subscribeOkBtn { width: 150px; height: 40px; border: none; border-radius: 20px; color: #fff; background-color: #385e94; cursor: pointer; font-size: 16px; }
.subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .btnAll .subscribeExitBtn { margin-left: 20px; width: 150px; height: 40px; border: none; border-radius: 20px; color: #fff; background-color: #888; cursor: pointer; font-size: 16px; }
.selfModal { width: 100%; height: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.801); position: fixed; top: 0px; left: 0px; z-index: 7000; display: none; }
.selfModal .selfBox { width: 600px; height: auto; display: flex; justify-content: center; flex-flow: column nowrap; align-items: center; }
.selfModal .selfBox .selfTitle { width: 100%; height: 60px; background-color: #67a2e6; font-weight: bold; text-align: center; line-height: 60px; color: #fff; font-size: 1.4em; }
.selfModal .selfBox .selfContents { width: 100%; height: auto; box-sizing: border-box; padding-top: 40px; background-color: #fff; }
.selfModal .selfBox .selfContents ol { list-style: none; box-sizing: border-box; padding: 0px 40px; height: 400px; overflow-y: auto; }
.selfModal .selfBox .selfContents ol li { width: 100%; display: flex; flex-flow: column nowrap; padding-top: 10px; }
.selfModal .selfBox .selfContents ol li span { line-height: 1.5em; padding-bottom: 5px; }
.selfModal .selfBox .selfContents ol li span:nth-child(1) { font-weight: 700; }
.selfModal .selfBox .selfContents ol li span:nth-child(2) { font-weight: 400; }
.selfModal .selfBox .selfContents ol li .selfTable { width: 100%; height: cala(124px); border: 1px solid #bbb; }
.selfModal .selfBox .selfContents ol li .selfTable article { display: flex; justify-content: flex-start; width: 100%; height: 30px; border-bottom: 1px solid #bbb; }
.selfModal .selfBox .selfContents ol li .selfTable article p { box-sizing: border-box; line-height: 30px; height: 30px; padding: 0px 10px; }
.selfModal .selfBox .selfContents ol li .selfTable article p:nth-child(1) { width: 99px; background-color: #eee; font-weight: 700; border-right: 1px solid #bbb; }
.selfModal .selfBox .selfContents ol li .selfTable article p:nth-child(2) { width: 390px; }
.selfModal .selfBox .selfContents ol li .selfTable article:nth-child(4) { border-bottom: none; }
.selfModal .selfBox .selfContents .selfBtnBox { width: 520px; height: 120px; border-top: 1px solid #ccc; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 30px 40px 0px 40px; font-size: 1.25rem; }
.selfModal .selfBox .selfContents .selfBtnBox .selfExitBtn {width: 150px;height: 40px;border-radius: 20px;border: none;background-color: #ddd;font-size: 16px;}
.modalback { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; visibility: visible; z-index: 100; }
.modalBox { max-width: 700px; height: auto; background-color: #fff; display: flex; flex-direction: column; align-content: center; text-align: center; }
.modalExit { width: 100%; height: 50px; display: flex; justify-content: end; }
.modalExitBtn { width: 50px; background-color: rgb(170, 79, 79); line-height: 50px; color: #fff; font-size: 2em; cursor: pointer; }
.modalcontent { width: 100%; height: auto; padding: 0 10px; box-sizing: border-box; }
.modalcontent img { width: 100%; max-width: 100%; display: block; }
.modalNo { width: 100%; height: 50px; padding: 0 20px; line-height: 50px; font-size: 0.9em; box-sizing: border-box; display: flex; justify-content: flex-start; margin-left: 5px; }

/* top */
.top_btn { position: absolute; right: 5rem; bottom: 18rem; z-index: 100; text-transform: capitalize; width: 7rem; height: 7rem; text-align: center; background: #0194e1; color: #fff; padding: 2rem 0; }
.top_btn>* { display: block; line-height: 1; }
.top_btn span { font-size: 1.5rem; margin-top: 5px; letter-spacing: 1px; }
.top_btn i {display: block;-webkit-transform: translateZ(0);transform: translateZ(0);}
.top_btn:hover i { -webkit-animation-name: hvr-icon-up; animation-name: hvr-icon-up; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
@keyframes hvr-icon-up {
  0%,
	50%,
	100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
	75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@media (min-width: 1279px) {  
  .gnb_wrap {display: none;}
}
@media (max-width: 1280px) {
  html { font-size: 9px; }
  #header {padding: 1em 1.5em;}
  #header .logo a>* {width: 55px;}
  #header.menu #hnb { display: none;}
  #hnb { float: none; position: absolute; right: 0; top: 0; visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; -webkit-transition: 0.4s 0.4s; transition: 0.4s 0.4s; }
  .gnb__wrap {display: none;}
  .menu-trigger, .menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
  .menu-trigger {position: relative;width: 38px;height: 30px;z-index: 50;display: block;}
  .menu-trigger.active-1 span {background-color: #000;}
  .menu-trigger span {position: absolute;left: 0;width: 100%;height: 4px;background-color: #fff;border-radius: 4px;}
  .fix .menu-trigger span {background-color: #221e1f;;}
  .menu-trigger span:nth-of-type(1) {top: 0;}
  .menu-trigger span:nth-of-type(2) {top: 13px;}
  .menu-trigger span:nth-of-type(3) {bottom: 0;}
  .menu-trigger.active-1 span:nth-of-type(1) {-webkit-transform: translateY (13px) rotate (-45deg);transform: translateY(13px) rotate(-45deg);}
  .menu-trigger.active-1 span:nth-of-type(2) {opacity: 0;}
  .menu-trigger.active-1 span:nth-of-type(3) {-webkit-transform: translateY(-13px) rotate(45deg);transform: translateY(-13px) rotate(45deg);}
  .search>.searchBar { position: absolute; top: 76px; top: 7.5rem; width: 200px; left: -30%; border-bottom: none; border-radius: 20px; }
  .search>.searchIcon { position: absolute; top: 6.3rem; right: 24%; font-size: 2em; margin-top: 0; padding-right: 0; }
  .top_btn {display: none;}
  #footer .info ul li { float: none; display: inline-block; }
  #footer .container { width: calc(100% - 2rem); }
  .f_bottom { flex-direction: column; align-items: center; text-align: center; padding-top: 0; }
}
@media (max-width: 850px) {
  #footer .info .copy {margin-top: 10px;}
  #footer .related {justify-content: center;}
  .f_top {flex-direction: column;align-items: center;gap: 15px;}
  .f_top .info {text-align: center;}
  .footerLink {text-align: center;gap: 10px;}
  #last_view {order: -1;text-align: center;}
}
@media (max-width: 768px) {
  html { font-size: 8px; }
  .top_btn:hover i { animation: none; }
  .f_bottom{ border-top: none; margin-top: 0; padding-top: 0; }
}
@media (max-width: 600px) {
  #header.menu .gnb_wrap { width: 100vw;overflow: auto;padding: 50px 5% 15px;}
  #hnb>a { padding: 0 1.2rem; }
  .search>.searchBar, .search>.searchBar.on { width: 80%; }
	.search>.searchBar { left: -24%; }
  .f_list .container {flex-direction: column;align-items: center;gap: 15px;}
  .subscribeBtn, .expBtn, .pdf_down {width: 50%;line-height: normal;}
  .subscribeModal .subscribeBox, .subscribeModal .subscribeCancelBox, .selfModal .selfBox { width: 90%; }
  .subscribeModal .subscribeBox .subscribeContents, .subscribeModal .subscribeCancelBox .subscribeContents { padding: 15px; line-height: 1.2; font-size: 16px; }
  .subscribeModal .subscribeBox .subscribeContents .explantionText, .subscribeModal .subscribeCancelBox .subscribeContents .explantionText { padding: 20px 0px; font-size: 18px; }
  .subscribeModal .subscribeBox .subscribeContents .alertBox, .subscribeModal .subscribeCancelBox .subscribeContents .alertBox { padding: 20px 10px; font-size: 16px; }
  .selfModal .selfBox .selfContents { padding-top: 20px; }
  .selfModal .selfBox .selfContents ol { padding: 0 20px; }
  .selfModal .selfBox .selfContents .selfBtnBox { width: 100%; padding: 10px; height: auto; margin: 0; margin: 15px auto 0; }
  .subscribeModal .subscribeBox .subscribeContents .emailInputBox .eInputBox .emailInputOut, .subscribeModal .subscribeCancelBox .subscribeContents .emailInputBox .eInputBox .emailInputOut { width: 75%;}
}
@media (max-width: 500px) {
  #hnb .related_link a+a { margin-left: 1rem; }
  .gnb_wrap:before {display: none;}
  .top_btn { width: 5rem; height: 5rem; padding: 0.7rem 0; }
  .top_btn span { margin-top: 0; }
  #last_view .scroll {width: 135px;}
}
@media (max-width: 414px) {
  .f_bottom { padding-top: 0; margin-top: 0; border-top: none; }
}
@media (max-width: 320px) {
  .subscribeBtn, .expBtn, .pdf_down {padding: 8px 10px; }
}