@charset "UTF-8";


@import url("ui/card2.css"); /*메인카드*/
@import url("ui/articleDetail.css"); /*글읽기*/
@import url("ui/siteLinks.css"); /*사이트링크*/

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;
src: url(../fonts/NotoSansKR-Regular.woff2) ormat('woff2'),
url(../fonts/NotoSansKR-Regular.woff) format('woff'),
url(../fonts/NotoSansKR-Regular.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;
src: url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
url(../fonts/NotoSansKR-Medium.woff) format('woff'),
url(../fonts/NotoSansKR-Medium.otf) format('opentype');}

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;
src: url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
url(../fonts/NotoSansKR-Bold.woff) format('woff'),
url(../fonts/NotoSansKR-Bold.otf) format('opentype');}


html{-webkit-text-size-adjust:none; /*-ms-user-select:none; -khtml-user-select:none; -webkit-user-select:none; user-select:none;*/-webkit-touch-callout:none; }
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body,a,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,th,td,
form,fieldset,label,legend,input,textarea,button,menu{margin:0px;padding:0px; -webkit-text-size-adjust:none;}
body,input,textarea,select,table,button,code{color: #787E8B;; letter-spacing:-0.1px;
font-weight: 400; font-family: 'Noto Sans KR'; text-align: left; } 
body{width:100%; position:relative;word-wrap:break-word;word-break:break-all; background: #fff /*#F8F8FA*/;
-ms-overflow-style: none;}
body::-webkit-scrollbar {display: none;}

nav,menu,ul,li,ol{list-style:none;}
div{display:block;}
table{border-collapse:collapse; border-spacing:0;}
img,fieldset{border:none;}
em,address{font-style:normal;}
select{cursor: pointer;}
section,article,header,footer,nav,aside,hgroup{display:block;}
button{border:none; background:none; cursor: pointer;}
button:focus{outline: none;}
a{margin:0px; padding:0px; text-decoration:none; cursor:pointer;}
a:hover, a:active{text-decoration:none !important;}
table{table-layout: fixed;}



/*fix*/
.floatLeft{float: left;} .floatLeft:after{content:""; display:block; clear:both;}
.floatRight{float: right;} .floatRight:after{content:""; display:block; clear:both;}
.clearfix:after{content:""; display:block; clear:both;}
.bold{font-weight: 700 !important;}
.inside{display: inline-block;}
.inside:after{content: ""; display: block; clear: both;}
.row{display: block; width: 100%}
.row:after{content: ""; display: block; clear: both;}

select::-ms-expand {display: none;}
select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.readerOnly {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0,0,0,0);
}

.hide{
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0,0,0,0);
}


:root {
  --main: /*#ffc107*//*#ffdc07*/#111;
  --red: #ff2929;
  --border: 1px solid #e0e0e0;
  --borderA : 1px solid rgba(0,0,0,0.05)
}





/*공통 레이아웃 : 시작*/
.centerWrap{
  position: relative;
  display: block;
  width: 100%;
  max-width: 1200px;
  padding:0 20px;
  text-align: center;
  margin:0 auto;
}

.allWrap{
  display: block;
  width: 100%;
  padding:179px 0 100px;
}
/*공통 레이아웃 : 끝*/



/*헤더 : 시작*/
header{
  display: block;
  position: fixed;
  z-index: 100;
  width: 100%;
  background: #fff;
  text-align : center;
  /* transition: all 0.3s; */
}




header .centerWrap .headerWrap{
  height: auto;
  border-bottom:3px solid var(--main);
}

header .centerWrap .headerWrap .row1{
  display: block;
  width: 100%;
  text-align: center;
  height:118px;
  padding:38px 0 0;
}

header.active .centerWrap .headerWrap .row1{
  padding:0;
  height:auto;
  float: left;
  width: 110px;
}

.headerLogo{
  display: block;
  width: 200px;
  height: auto;
  line-height: 0;
  margin:0 auto;
}

.headerLogo img{
  display: block;
  width: 100%;
}


header.active{border-bottom:var(--border);}

header.active .centerWrap .headerWrap{
  height: 60px;
  border-bottom:none;
}

header.active .headerLogo{
  width: 110px;
  margin:15px 0 0;
}


.allWrap.active{padding:60px 0 50px;}


.headerWrap nav{
  display: block;
  width: 100%;
  text-align: center;
  border-top:1px solid var(--main);
  padding:10px 0;
  line-height: 0;
}

.headerWrap nav:after{content: ""; display: block; clear: both;}

.headerWrap nav .headerMenu{
  display: block;
  float: left;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
  color:var(--main);
}

.headerWrap nav .headerMenu + .headerMenu{margin:0 0 0 20px}

header.active .headerWrap nav{
  display: block;
  float: left;
  width: calc(100% - 170px);
  border: none;
  text-align: left;
  padding:10px 0 0 40px;
}

header .buttonMainMenu{
  position: absolute;
  display: none;
  top:0;
  right:0;
  width:60px;
  height:60px;
  background: url(../images/ui/nav-menu.png) center no-repeat;
  background-size: 20px 14px;
} 
/*헤더 : 끝*/



/* 메인메뉴 레이어 : 시작 */
.mainMenuLayer{
  display: none;
  position: fixed;
  z-index: 1000;
  background: #fff;
  width:240px;
  top:0;
  left:0;
  height:100vh;
  border-right:var(--border);
  padding:15px 20px;
  overflow-y: auto;
}

.mainMenuLayer.active{display: block;}

.mainMenuLayer .topLogo{
  display: block;
  width: 110px;
  line-height: 0;
}

.mainMenuLayer .topLogo img{
  display: block;
  width: 100%;
}

.mainMenuLayer .closeMainMenuLayer{
  display: block;
  position: absolute;
  width:40px;
  height:40px;
  border-radius: 5px;
  border:1px solid #e0e0e0;
  top:10px;
  right:5px;
  background:url(../images/ui/close.png) center no-repeat;
  background-size: 14px 14px;
}

.mainMenuLayer > .menus{
  display: block;
  width: 100%;;
  margin:40px 0;
}

.mainMenuLayer > .menus .menu{
  display: block;
  width: 100%;
  height:50px;
  line-height: 50px;
  font-size:17px;
  font-weight: 600;
  color:#222 !important;
  text-align:left;
  border-bottom:var(--border);
  background:url(../images/ui/nav-back-s-r.png) right no-repeat;
  background-size: 6px 12px;
}

.mainMenuLayer > .menus .menu:hover{
  color:#555 !important;
}

.dimm{
  display: none;
  position: fixed;
  width: 100%;
  height:100vh;
  top:0;
  left:0;
  background: rgba(0,0,0,0.7);
  z-index: 900;
}

.dimm.active{display: block;}
/* 메인메뉴 레이어 : 끝 */


/*푸터 : 시작*/
footer{
  display: block;
  width: 100%;
  border-top:var(--border);
  padding:40px 0 70px;
  text-align: center;
}

.footerlogo{
  display: inline-block;
  width: 100px;
  line-height: 0;
  /*float: left;*/
}

.footerlogo img{
  display: block;
  width: 100%;
  opacity: 0.4;
}

.footerInfo{
  display: block;
  width: 100%;
  /*float: left;
  width: calc(100% - 100px);*/
  text-align: center;
  font-size:13px;
  line-height: 20px;
  color:#555 !important;
  font-weight: 400;
}

.footerInfo a{
  color:#555 !important;
}
/*푸터 : 끝*/



/*위로가기 버튼 : 시작*/
#gotoTop{
  display: none;
  position: fixed;
  width: 50px;
  height: 50px;
  background: url(../images/ui/go_top3.png) center no-repeat;
  background-size: 50px 50px;
  bottom:40px;
  right: 60px;
  z-index: 100;
  font-size: 0;
  border-radius: 50%;
  filter:drop-shadow(0,0,10px,rgba(0,0,0,0.2));
  opacity: 0.8;
}
/*위로가기 버튼 : 끝*/





/* 페이징 : 시작 */
.paging{
  display: block;
  width: 100%;
  text-align: center;
  margin:36px 0 0;
}

.buttonPage{
  display: block;
  width:40px;
  height:40px;
  background: #f0f0f0;
  color:var(--main) !important;
  line-height: 40px;
  text-align: center;
  float: left;
  font-size:15px;
  border-radius: 5px;
}

.buttonPage.active{
  background: var(--main);
  color:#fff !important;
}

.pagePrev, .pageNext{font-size:13px;}

.buttonPage + .buttonPage{margin:0 0 0 10px;}
/* 페이징 : 끝 */





























































@media screen and (max-width: 1200px) {


} /*반응형 1200px 끝*/



@media screen and (max-width: 1000px) {

  /*헤더 : 시작*/
  header {border-bottom: var(--border);}

  header .headerLogo {
    width: 110px;
    margin: 15px 0 0;
  }

  header .headerWrap nav{
    display: none !important;
    /*float: left;
    width: calc(100% - 170px);
    border: none;
    text-align: left;
    padding: 10px 0 0 40px;*/
  }

  header .centerWrap .headerWrap .row1 {
    padding: 0;
    height: auto;
    float: left;
    width: 110px;
}

  header .centerWrap .headerWrap{
    height: 60px;
    border:none
  }

  .headerLogo{
    width: 110px;
    margin:15px 0 0;
  }

  header .buttonMainMenu{display: block;}
  /*헤더 : 끝*/


  .allWrap{padding:60px 0 50px;}

} /*반응형 1000px 끝*/



@media screen and (max-width: 800px) {

  /*위로가기 버튼 : 시작*/
  #gotoTop{
    width: 40px;
    height: 40px;
    background: url(../images/ui/go_top3.png) center no-repeat;
    background-size: 40px 40px;
    bottom:24px;
    right: 12px;
  }
  /*위로가기 버튼 : 끝*/

} /*반응형 800px 끝*/



@media screen and (max-width: 600px) {



} /*반응형 600px 끝*/



@media screen and (max-width: 500px) {


} /*반응형 500px 끝*/



@media screen and (max-width: 400px) {


} /*반응형 400px 끝*/



@media screen and (max-width: 380px) {


} /*반응형 380px 끝*/



@media screen and (max-width: 350px) {


} /*반응형 350px 끝*/



@media screen and (max-width: 319px) {


} /*반응형 319px 끝*/