@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap');
@import url(css/onegothic.css);
@import url(https://cdn.jsdelivr.net/xeicon/1/xeicon.min.css);
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.05em;color:inherit;}
html {font-size: 22px;}
img {border:0; vertical-align:top;}
a {border:0; text-decoration:none; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
ul, li {list-style:none;}
body {font-family: "Pretendard Variable", Pretendard, sans-serif; color:#303030;}
div {display:block;}



.inner {width:1400px;margin:auto;clear:both}
.inner2 {width: 1200px; margin: auto; clear: both;}
.c_default {color:#303030 !important}
.c_lightgray {color:#c8c1b8 !important}
.c_gray {color:#808080 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.color1 {color: #ffa03b !important;}
.color2 {color: #ffbc74 !important;}
.color3 {color: #ff7700 !important;}
.color4 {color: #c4e2f7 !important;}



h1,h2,h3 {font-weight:300;line-height:1.3}
h1 {font-size:2.27rem;}
.sizeh1 {font-size: 2.27rem !important;}
h1.small {font-size: 2.09rem;}
h1.big {font-size: 2.72rem; }
h1.superbig {font-size: 3.63rem; letter-spacing:-0.02em;}
.h1_giant {font-size: 4.54rem; letter-spacing:-0.03em;}
h2 {font-size:1.81rem}
h3 {font-size:1.36rem; }
.sizeh3 {font-size:1.36rem; }
h4 {font-size:1.1rem; font-weight:400; line-height:1.45;}
.sizeh4 {font-size: 1.1rem;}
h5 {font-size:1rem; font-weight: 400; line-height:1.6; word-break:keep-all;}
.sizeh5 {font-size: 1rem !important;}
p {font-size:0.9rem; line-height:1.7; color:inherit; word-break:keep-all; }
p.small {font-size:0.81rem; }
p.typeline {font-size:0.63rem; }
sub {font-size: small; }



.batang {font-family: 'Noto Serif KR';}
.loose {letter-spacing: 0.4rem;}
.loose2 {letter-spacing: 0.2rem;}
b {letter-spacing: inherit; font-weight: 600;}
.bold {font-weight: 700 !important;}
.black {font-weight: 800 !important;}


span {color:inherit;}

.float {float:left;}
.float_r {float:right}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.clearfix::after {content:""; clear:both; display: block;}
.inlineblock {display: inline-block;}

.relative {position: relative;}


.flex {display: flex;}
.col1 {flex: 1;}
.col2 {flex: 2;}
.col3 {flex: 3;}
.col4 {flex: 4;}
.col5 {flex: 5;}
.col6 {flex: 6;}


.bd_b {border-bottom:1px #e0e0e0 solid}
.bd_t {border-top:1px #e0e0e0 solid}



/* 컬럼 설정 */
.w05 {width: 5%;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w22 {width: 22%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w50 {width: 50% !important;}
.w60 {width: 60%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w100 {width: 100% !important;}




/* 자세히보기 */
span.link {font-size: 1rem; display: inline-block; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
span.link::after {content: ""; width: 80px; height: 1rem; background: url(images/link_arrow.png) right center no-repeat; display: inline-block; margin-left: 1rem; margin-top:0.5rem; overflow: hidden; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
span.link.dark::after {background: url(images/link_arrow_dark.png) right center no-repeat;}
span.link:hover {letter-spacing: 0.6rem;}
span.link:hover::after {width: 150px; margin-left: 0;}





/* 공통 */
#wrap {width:100%; min-width:1400px; margin:auto; position:relative; }



#header {width:100%; height: 5rem; border-bottom: 1px rgba(255,255,255,0.3) solid; position: fixed; z-index: 100; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#header * {-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#header h2.logo {font-weight: 700; color: #fff; line-height: 5rem; float: left;}
#header h2.logo span {font-size:2.27rem; color: #ffa03b;}
#header #gnb {float: right;}
#header #gnb li {float: left; width: 7rem; margin-left: 1rem; } 
#header #gnb .topnav {color: #fff; line-height: 5rem; text-align: center; }
#header #gnb .topnav p {}
#header #gnb li > a.on {color: #ffa03b; font-weight: bold;}
#header #gnb .subnav { 
  margin:auto;
  width:100%;
  background:rgba(255,255,255,0.9);
  display: none;
  position: fixed;
  z-index:1000;
  top:5rem;
  left: 0;
  padding: 0.5rem 0;
}
#header #gnb .subnav .inner > div {float: right;}
#header #gnb .subnav dl {float: left; width: 7rem; margin-left: 1rem; text-align: center;}
#header #gnb .subnav dd {line-height: 1.8rem; font-size: 0.9rem;}
#header #gnb .subnav a:hover {color: #ffa03b; font-weight: bold;}
#header #gnb .subnav a {display:block;}


#header:hover,#header.jbFixed {background-color: #fff; border-bottom: 1px rgba(0,0,0,0.1) solid;}
#header:hover *,#header.jbFixed * {color: #303030;}

#header.jbFixed {height: 4rem;}
#header.jbFixed h2.logo {line-height: 4rem;}
#header.jbFixed #gnb .topnav {line-height: 4rem;}
#header.jbFixed #gnb .subnav {top: 4rem;}


#header #gnb .subnav a::before,#header #gnb .subnav a::after  {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

#header #gnb .subnav a::before {
  content: '\e93f';
  font-family: 'xeicon';
  font-size: 0.6rem;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

#header #gnb .subnav a::after {
  content: '\e93c';
  font-family: 'xeicon';
  font-size: 0.6rem;
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

#header #gnb .subnav a:hover:before, #header #gnb .subnav a:hover:after, #header #gnb .subnav a:focus:before, #header #gnb .subnav a:focus:after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

#header #gnb .subnav a.on:before, #header #gnb .subnav a.on:after, #header #gnb .subnav a.on:before, #header #gnb .subnav a.on:after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}




#footer {width:100%; border-top: 1px #e0e0e0 solid; padding-bottom: 2rem; display: inline-block; position: relative;}
#footer h1.logo {background: url(images/footer_logo.png) center no-repeat; width: 240px; height: 60px; text-indent: -3333px;}


#footer #back-top {width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: #d0d0d0; color: #fff; display: block; position: absolute; top: -30px; right: 0; font-family: pretendard; z-index: 1;}
#footer #back-top:hover {background-color: #505050; color: #fff;}

#footer .info {width: 1400px; margin: auto; position: relative; padding-top: 50px;}

#footer .info .area1 {width: calc(100%/5 *1); float: left;}
#footer .info .area2 {width: calc(100%/5 *3); float: left;}
#footer .info .area2 p { white-space:pre;}
#footer .info .area3 {width: calc(100%/5 *1); float: left;}
#footer .info .area3 h2 {font-family: "Frank Ruhl Libre", serif; line-height: 1.1;}

#footer .copyright {display: inline-block; width: calc(100%/8 *6); left: calc(100%/8 *1); position: relative; border-top: 1px #e0e0e0 solid; padding-top: 1.5rem; margin-top: 2rem;}



#quick {background-color: rgba(255,255,255,0.9); border-radius: 50px; box-shadow: -3px -3px rgba(0, 0, 0, 0.2) inset;  position:fixed; z-index:9999; right:50px; bottom:60px;-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#quick ul {width:100%; padding: 0.5em 0;}
#quick ul li {text-align: center; margin: 1em 0.8em; }
#quick ul li a {display:block; }
#quick ul li a > img {width: 30px;}

#quick.jbFixed {bottom: 20px;}