@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { font-family: 'GongGothicMedium'; src: url('https://github.com/projectnoonnu/noonfonts_20-10/blob/main/GongGothicMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'MapoGoldenPier';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Syongsyong';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Syongsyong.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {  padding: 0;  margin: 0;  /*background-color: #f8e8e8;	*/  box-sizing:border-box;}
#wrap {
  /* .content.head.row > .webzine_dc */
  /* .content.head.row > .menu-list */
}
.row {    display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    margin-right: -15px;    margin-left: -15px; }
.col2 { float:left;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}

#wrap{width:100%; margin:0 auto; /* background:url(../images/com/main_bg.gif) top repeat-x; margin:0 auto; */ }

#wrap .container { width: 1000px;  margin:0 auto; }
#wrap .header {  background-color: #fcfcfc;  margin-bottom: 10xp;  border: 0 none;  /*border-bottom: 1px solid #eee;*/}
#wrap .header .container {  position: relative;  border: 0 none;}
#wrap .header .container select.selectWebzine {  width: 120px; /* position: absolute;  top: 66px;  right: 7px;  z-index: 99; */}
#wrap .container .Tophead{position: relative; width:100%;   padding-top: 25px; }
#wrap .container .Tophead ul {float:left; width:100%;}
#wrap .container .Tophead li {/*display:flex;*/ float:left; width:50%;  font-size:18px; font-weight:600; color:#00006f;}
#wrap .container .Tophead p {float:left; width:100%;; margin:10px 0;}

@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { font-family: 'GongGothicMedium'; src: url('https://github.com/projectnoonnu/noonfonts_20-10/blob/main/GongGothicMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'MapoGoldenPier';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Syongsyong';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Syongsyong.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {  padding: 0;  margin: 0;  /*background-color: #f8e8e8;	*/  box-sizing:border-box;}
.br340 {display:none;}

#wrap {
  /* .content.head.row > .webzine_dc */
  /* .content.head.row > .menu-list */
}
.row {    display: -ms-flexbox;    display: flex;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    margin-right: -15px;    margin-left: -15px; }
.col2 { float:left;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}

#wrap{width:100%; margin:0 auto; /* background:url(../images/com/main_bg.gif) top repeat-x; margin:0 auto; */ }

#wrap .container { width: 1000px;  margin:0 auto; }
#wrap .header {  background-color: #fcfcfc;  margin-bottom: 10xp;  border: 0 none;  /*border-bottom: 1px solid #eee;*/}
#wrap .header .container {  position: relative;  border: 0 none;}
#wrap .header .container select#selectWebzine {  width: 120px; /* position: absolute;  top: 66px;  right: 7px;  z-index: 99; */}
#wrap .container .Tophead{position: relative; width:100%;   padding-top: 25px; }
#wrap .container .Tophead ul {float:left; width:100%;}
#wrap .container .Tophead li {/*display:flex;*/ float:left; width:50%;  font-size:18px; font-weight:600; color:#00006f;}
#wrap .container .Tophead p {float:left; width:100%;; margin:10px 0;}
#wrap .container .Tophead h1{float:left; width:100%; font-size:45px; color:#; margin:30px 0; text-align:center; font-family:'KOTRA_BOLD-Bold','MapoGoldenPier','NanumSquare','Noto Sans KR','Malgun Gothic', 'Nanum Gothic', Sans-serif; }
#wrap .container .Tophead h1 b {color:#ff8400;}
#wrap .container .Tophead h1 span { color:#00006f;}


#wrap .header .col,
#wrap .header .col-sm,
#wrap .header .col-md,
#wrap .header .col-lg {  padding-top: 25px;}

#wrap .menu-list {float:left; position:relative; width:95%; margin:20px 2.5% ; }
#wrap .menu-list ul li {float:left; width:20%; list-style: none;  text-align: center;}
#wrap .menu-list ul li img {margin-bottom:10px;}
#wrap .menu-list ul li a {  display: inline-block;  color: #000;  font-size: 16px;  text-decoration: none;}
#wrap .menu-list ul li a img {  opacity: 1;}
#wrap .menu-list ul li a .text {  width: 100%;  margin-top: 4px;  color: #333;  font-weight: normal;}
#wrap .menu-list ul li a:hover img {  opacity: 0.6;}
#wrap .menu-list ul li a:hover .text {  font-weight: bold;}

#wrap .ContentBody {width:99%; float:left;  border:1px solid #d7d7d7 ;}

#wrap .menu-thumb {float:left; /* display:flex;*/  width: 47%;  height:375px;  background-color: #fff;  box-shadow: 5px 2px 7px #ccc, -1px -1px 2px #ccc;  text-align: center;  padding: 15px;  margin:1.5%; box-sizing:border-box;}

#wrap .menu-thumb .photo_img  {WIDTH: 100%; HEIGHT: auto;  position:relative;left:0;right:0; margin:0 auto}
#wrap .menu-thumb .photo_img:before  {WIDTH:100%;HEIGHT:0; text-align:center;  border:1px solid #ddd; content:"";display:block;padding-top:65%;}
#wrap .menu-thumb .photo_img img {position:absolute; width:100%; HEIGHT:100%; left:0; top:0;border:1px solid #ddd;  }

/*#wrap .menu-thumb .photo_img img.border {  border: 1px solid #ddd;}*/

/*
#wrap .menu-thumb img {  max-width: 100%;}
#wrap .menu-thumb img.border {  border: 1px solid #ddd;}
*/

#wrap .menu-thumb .map  {WIDTH: 100%; HEIGHT: auto; position:relative;left:0;right:0; margin:0 auto}
#wrap .menu-thumb .map:before  {WIDTH:100%;HEIGHT:0; text-align:center;  border:1px solid #ddd; content:"";display:block;padding-top:78%;}
#wrap .menu-thumb .map img {position:absolute; width:100%; HEIGHT:100%; left:0; top:0; border:1px solid #ddd;  }

/*#wrap .menu-thumb .map {width:100%; overflow:hidden; }*/

#wrap .menu-thumb .description {  position: relative; width:100%;  margin-top: 13px;  padding-left: 65px; box-sizing:border-box;}
#wrap .menu-thumb .description .topic {text-align:left;   padding-top: 5px;  font-size: 14px}
#wrap .menu-thumb .description .topic .menu-name {text-align:left;     font-weight: bold;}
#wrap .menu-thumb .description .tit {text-align:left; font-size:16px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1; }
#wrap .menu-thumb .description .topic .tag {  font-size: 12px;  margin-left: 5px;  color: #7f7aa5;}
#wrap .menu-thumb .description .icon {  position: absolute;  left: 5px;}

#wrap .menu-thumb[data-link]:hover {  background-color: #b6b6b6;  background-color: #333;  color: #fff;}
#wrap .menu-thumb[data-link]:hover .tag {  color: cyan;}
#wrap .menu-list > li.active {  background-color: #ca2b2b !important;  color: #fff;}
#wrap .menu-list > li.active .topic .tag {  color: #dad0e2;}

#wrap .webview 

#wrap .webview ul { list-style:disc;margin: 0; padding:revert;}
#wrap .webview ul > li { list-style:disc;margin: 0; padding:revert;}
#wrap .webview ol { list-style:decimal;margin: 0; padding:revert;}
#wrap .webview ol > li { list-style:decimal;margin: 0; padding:revert;}

#wrap .banner {float:left; position:relative; width:100%; margin:30px 0;}
#wrap .banner li {float:left; width:50%; text-align:center; margin-bottom:10px;}
#wrap .copyright {float:left; position:relative; width:100%; margin:20px 0; /*border-top:1px solid #d7d7d7;*/ padding:30px 0 0;  text-align:center; font-size:15px; line-height:25px;}

#wrap .view {float:left; position:relative; width:100%; padding:20px 2.5% ; box-sizing:border-box;}

/* °Ô½ÃÆÇ ³»¿ë ÆíÁý±â À¯Æ©ºê »ðÀÔ */
.videodetector {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 60%;
}
.videodetector iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}
.remove-videodetector{
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 999;
    cursor: pointer!important;
    display: none;
    outline: none;
    padding: 10px 20px;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
    border-radius: 3px;
    border: none;
    background-color: #e74c3c;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.remove-videodetector:hover{ display:none; /*background-color: #c0392b;*/ }
.videodetector:hover .remove-videodetector{ display:none; /*display: block;*/ }


@media screen and (max-width: 991.98px) {
  #wrap .container {width: 98%;  }

  #wrap .menu-list ul li a img {width:95%;}
  
  #wrap .menu-thumb .description {}
  #wrap .menu-thumb .description .icon {    left: 0;    /* top: -20px; */  }
  #wrap .menu-thumb .description .title {    font-size: 10.725pt;  }
  #wrap .menu-thumb .description .tags {    font-size: 8.25pt;  }
  #wrap .banner img {width:90%;}

@media screen and (max-width: 850px) {
  
  #wrap .menu-thumb {height:320px;}

}

  @media screen and (max-width: 767px) {
  
  #wrap .menu-thumb {height:300px;}

}

@media screen and (max-width: 680px) {
  #wrap .container .Tophead li {width:100%;}
    #wrap .menu-thumb {height:280px}
                       
  }
@media screen and (max-width: 480px) { 

  #wrap .menu-list ul li a {font-size: 14px;}

  #wrap .menu-thumb img {  max-width: 100%;}
  #wrap .menu-thumb img.border {  border: 1px solid #ddd;}
  #wrap .menu-thumb {width: 94%;  height:auto;}
  #wrap .menu-thumb .description .tit {font-size:14px;   }
  #wrap .banner li {width:99%;}
  
}
@media screen and (max-width: 365.98px) {



}
@media screen and (max-width: 339.98px) {
.br340 {display:block;}
#wrap .container .Tophead li.wright{text-align:left; }
#wrap .container .Tophead h1 {font-size:38px;}
}