@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body {margin:0px auto;font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;/*background:url("/img/back_05_my.jpg") fixed;*/width:100%;padding:0px;display:table;-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}
table {border-top:3px solid #00bd39;margin:0 auto; padding:0px;width:100%;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
p,h1,h2,h3,h4,h5,h6,ul { margin:0px auto; font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}


td button {cursor: pointer;border-radius: 50px;font-size:20px;padding: 10px 30px;background-color: #ffb400;border:1px solid #f3c089;color: #ffffff;transition: 0.4s;box-shadow: 0px 0px 0px 0px #dadada;line-height: 40px;}
td button:hover {cursor: pointer;border-radius: 50px;font-size:20px;padding: 10px 20px;background-color: #d56969;border:1px solid #af4949;color: #ffffff;transition: 0.4s;box-shadow: 4px 4px 10px 0px #ababab;line-height: 40px;}

#warp h1{padding-top:100px;padding-bottom:10px;font-size:60px;font-weight:600;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;position:relative;}
#warp h2{padding-top:0px;font-size:35px;font-weight:200;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:36px;}
#warphead
h1{top:150px;font-size:34px;font-weight:900;color:#7f0613;text-align:center;font-family:'Noto','Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;position:relative;letter-spacing: -1px;background: -webkit-linear-gradient(#e9f4ff, #d9ff00);-webkit-background-clip: text;line-height: 38px;
-webkit-text-fill-color: transparent;
white-space: nowrap;}
#warphead h2{top:220px;font-size:22px;font-weight:200;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:24px;position:relative;}
.basic_li {padding: 20px;display: table;}
#warphead_zoon{
  position: relative;
  top:72px;
  max-width: 1200px;display: grid;grid-template-columns: repeat(2,1fr);
  grid-gap: 10px;padding: 0px;margin: 0px auto;
  background-color: transparent;
  height: 400px;
  box-sizing: border-box;

}
.head_top_left {background-color: #ffffff;border-radius: 20px;width: 100%;position:relative;display:block;height: 400px;background:url(/img/back_vonpoh_.png) #0b2a35 no-repeat;}
.head_top_left ul {font-size: 30px;padding: 40px;line-height: 46px;word-wrap: break-word;color:#ffffff;letter-spacing: -1px;font-weight: 900;}
.head_top_right {background-color: #ffffff;border-radius:0px;width:100%;display:grid;grid-template-columns: repeat(1,1fr);
  grid-gap: 10px;padding: 0px;margin: 0px auto;
  background-color: transparent;
  height: 400px;
  box-sizing: border-box;}
.head_top_right_1 {position: relative;display: inline-block;width: 100%;height: 100%;background-color: #ffffff;border-radius: 20px}
.head_top_right_2 {position: relative;display: inline-block;width: 100%;height: 100%;background-color: #ffffff;border-radius: 20px}
.head_top_right_1 ul,.head_top_right_2 ul {
  font-size: 30px;padding: 40px;line-height: 36px;word-wrap: break-word;letter-spacing: -1px;font-weight: 900;
}
#content h1{padding-top:70px;font-size:60px;font-weight:600;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
#content h2{padding-bottom:70px;padding-bottom:10px;font-size:35px;font-weight:200;color:#333333;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:36px;}
.js-tab-con{display:none;}
.js-tab-con.on{display:block;}

.vonpoh h3{font-family:'Noto Sans KR', sans-serif;color:#000000;font-weight:500;padding:10px;text-align:left;font-size:30px;}
.v_msg {font-size:20px;padding:20px 10px;clear:both;font-family:'Noto Sans KR', sans-serif;}
.v_msg li {line-height:33px;font-weight:300;letter-spacing:0.5px;}
.v_msg li span{background-color:#00290c;color:#ffffff;}
.v_about {display:table;padding:20px 10px;/*background:url("/img/vb_001.png") 600px 90px no-repeat;width:100%;*/}
.v_about li {width:300px;font-size:16px;line-height:30px;float:left;padding:0 30px 0 0;}
.v_his {display:table;padding:20px 10px;font-family:'Noto Sans KR', sans-serif;}
.v_his h3 {padding:20px 0;font-size:20px;font-weight:500;}
.v_his li {font-size:12px;line-height:18px;float:left;padding:0 30px 0 0;font-weight:300;letter-spacing:0.5px;}
.v_his li img {width:120px}

.cls-1 {
        fill: #e71e27;
      }

      .cls-2 {
        fill: #fff;
      }

      .cls-3 {
        fill: #e7262f;
      }

      .cls-4 {
        fill: #ee87b4;
      }

      .cls-5 {
        fill: #f198a1;
      }

      .cls-6 {
        fill: #231815;
      }

      .cls-7 {
        fill: #c9caca;
        stroke-width: 4px;
      }

      .cls-7, .cls-8 {
        stroke: #231815;
        stroke-miterlimit: 10;
      }

      .cls-8 {
        fill: none;
      }
#vonpoh_new2023_ path , #vonpoh_new2023_ rect, #vonpoh_new2023_ circle {
  stroke-dashoffset:890;
  stroke-dasharray: 890;
  animation: draw_ 2s forwards;

}
#vonpoh_new2023_ g {
  fill-opacity:0;
  animation: filladd_ 2s 3s forwards;

}

@keyframes draw_ {

  to{
    stroke-dashoffset:0;
  }

} 
@keyframes filladd_ {
  to{
    fill-opacity:1;
  }
} 
      #vonpoh_new2023_ .vonpoh_logo_color_g {
        fill: #299E3A;
  stroke: #299E3A;
        stroke-width:6;
      }

#vonpoh_new2023_logo path , #vonpoh_new2023_logo rect, #vonpoh_new2023_logo circle {
  stroke-dashoffset:890;
  stroke-dasharray: 890;
  animation: draw 10s forwards infinite;

}
#vonpoh_new2023_logo g {
  fill-opacity:0;
  animation: filladd 10s forwards infinite;

}

@keyframes draw {
  0%{
    stroke-dashoffset:890;
  }
  10%{
    stroke-dashoffset:890;
  }
  30%{
    stroke-dashoffset:0;
  }
  95%{
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:890;
  }

} 
@keyframes filladd {
  0%{
    fill-opacity:0;
  }
  30%{
    fill-opacity:0;
  }
  55%{
    fill-opacity:1;
  }
  85%{
    fill-opacity:1;
  }
  100%{
    fill-opacity:0;
  }
} 
      #vonpoh_new2023_logo .vonpoh_logo_color {
        fill: #ffffff;
  stroke: #ffffff;
        stroke-width:2;
      }

      
#top_menu {width:1200px;margin:0 auto;height:42px;border-bottom:0px solid #dddddd;border-top:0px solid #11668d;/*background-color:rgba(255,255,255,0.9);border-bottom:1px solid #ffffff;*/z-index:9999;/*-webkit-backdrop-filter: saturate(180%) blur(10px);z-index: 999999;transition: 0.4s;padding: 15px 0px;backdrop-filter: saturate(180%) blur(20px)*/transition: 0.4s;padding: 15px 0px;}

.gnb_menu_wow {position:relative;padding:10px;}
.gnb_menu_wow h3 {font-size:20px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:100;height:50px;padding-top:20px}
.gnb_menu_wow h3 a {color:#000000;}
.gnb_menu_wow ul {font-size:14px;}
.gnb_menu_wow ul li {padding:10px 0;}
.gnb_menu_wow ul li a{color:#000000;}
.gnb_menu_wow ul li ul {padding-left:5px;padding-top:15px}
.gnb_menu_wow ul li ul li{padding:5px 0;font-size:12px;}

.first_menu { border-radius: 0px;margin-right: 0px;border:0px solid #aa22aa;/*background-color: rgba(67,157,186,0.9);*/transition-duration: 0.5s ;padding:0px 20px;}
.first_menu:hover { border-radius: 0px;margin-right: 0px;border-bottom:0px solid #aa22aa;transition-duration: 0.5s ;padding:0px 20px;font-weight: 900;}

th {line-height:60px;font-size:24px;font-weight:500;margin:0 auto;border-bottom:1px solid #dddddd;background-color:#ffffff;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
ol {margin:0; padding:0; list-style:none;  zoom:1;}
li {margin:0; padding:0; list-style:none;  zoom:1;}
ul {margin:0; padding:0; list-style:none;  zoom:1;}
a {
	text-decoration:none;
}
/*button {height:35px;margin:10px;}
button:hover {background-color:#990000;color:#ffffff;border:0px;}
*/
footer > p {color:#555555;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		font-weight:lighter; font-size:12px;		
		letter-spacing:0px;}
hr {border-bottom:solid 1px #dddddd;opacity:1;width:80%}
hr {border-top:solid 1px #ffffff;opacity:1;border-left:0px;}
#top_menu .menu ul li .new{
background-color: #000000;
color:#ffffff;
/*background-color:#ffffff;*/
font-size:11px;
font-weight:normal;
z-index:10000;
padding:5px;
}


.scroll_indicator {
        width: 100%;
        height: 5px;
        background: transparent;
        position: absolute;
        transition: transform .4s ease;
        z-index: 1;
    }
 
.scroll_indicator .scroll-bar {
        width: 0;
        height: 5px;
        background-color: #ffd100;
        background:linear-gradient(to right,#ff6b6b 4%, #9400ff 10%,  #ffd100 30%, #8baae3 96%, rgba(255,255,255,0));
       
        position: absolute;
        top:0px;
        transition: transform .4s ease;
    }

@media (min-width:1300px){
#main_warp {min-width:100%;margin:0px auto; display:table;position:relative;padding:0px; -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4,1fr);display: inline-grid;
    grid-gap: 20px;box-sizing: border-box;padding: 0px 20px;}
.lnt {position: relative;display: block;width: 1200px;height: auto;padding: 0px;margin: 0px auto;clear: both;}
    .lnt ul {padding: 10px 0px;margin: 0px auto; position: relative;display: block;clear: both;border-bottom: 1px solid #909090;height: 60px;    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;}
    .lnt ul li {padding: 5px 10px;}


.service_guide_01{padding:30px;margin:0 auto;flex-direction: column;display: flex;flex-direction: column;background-color: #fafafa;border-radius: 20px;transition: 0.4s;cursor: pointer;border:0px  solid #dddddd;}

.service_guide_01 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;transition-duration: 0.5s;border-bottom:1px solid #ffffff;}
.service_guide_01:hover div h3 {text-shadow: 3px 3px 3px rgba(150,150,150,0.5);transition-duration: 0.5s ;color: #1c294d;font-size: 30px;border-bottom:1px solid #1c294d;}
.service_guide_01:hover div li {transition: 0.5s;color: #343434;}
.service_guide_01:hover div li span{transition: 0.5s;color: #1c294d;}
.service_guide_01:hover {background-color: #ffffff;transition: 0.4s;border:0px solid #c6ab37;box-sizing: border-box;}
.service_guide_01 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_01 div li{padding:20px 0;color:#545454;transition: 0.4s}
.service_guide_01 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_01 div li span {font-weight:500;color:#333333;transition: 0.4s}
.service_guide_02{padding:30px;margin:0 auto;border-radius: 20px;background-color: #eaeaea;flex-direction: column;display: flex;transition-duration: 0.5s;border:0px solid #ffffff;cursor: pointer;}
.service_guide_02 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_02 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;transition-duration: 0.5s;border-bottom: 0px solid #ffffff}
.service_guide_02 div li{padding:20px 0;color:#545454;transition-duration: 0.5s;}
.service_guide_02 div li span {font-weight:500;color:#333333;transition-duration: 0.5s;}
.service_guide_02 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_02:hover div h3 {text-shadow: 3px 3px 3px rgba(8,39,60,0.9);transition-duration: 0.5s ;color: #ffffff;font-size: 30px;border-bottom:1px solid #ffffff;}
.service_guide_02:hover div li {transition: 0.5s;color: #ffffff;}
.service_guide_02:hover div li span{transition: 0.5s;color: #a2a2e6;}
.service_guide_02:hover {background-color: #1c294d;transition: 0.4s;border:0px solid #1c294d;box-sizing: border-box;}
.service_guide_02 img {float:right;width:40%;}
.service_guide_01 img {float:left;width:40%;}

.service_guide_03{clear:both;padding:30px 0px;max-width:1200px;margin:0 auto;}
.service_guide_03 div {width:100%;float:right;font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200;line-height: 26px;}
.service_guide_03 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;color: #000000;}
.service_guide_03 div li{padding:20px 0;color:#343434}
.service_guide_03 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_03 div li span {font-weight:500;color:#000000}

.v_msg {font-size:20px;padding:20px 10px;clear:both;font-family:'Noto Sans KR', sans-serif;}
.v_msg li {line-height:33px;font-weight:300;letter-spacing:0.5px;}
.v_msg li span{background-color:#00290c;color:#ffffff;}
.v_about {display:table;padding:20px 10px;/*background:url("/img/vb_001.png") 600px 90px no-repeat;width:100%;*/}
.v_about li {width:300px;font-size:16px;line-height:30px;float:left;padding:0 30px 0 0;}
.v_about li img {width: 100%;overflow: hidden;}
.v_his {display:table;padding:20px 10px;font-family:'Noto Sans KR', sans-serif;}
.v_his h3 {padding:20px 0;font-size:20px;font-weight:500;}
.v_his li {font-size:12px;line-height:18px;float:left;padding:0 30px 0 0;font-weight:300;letter-spacing:0.5px;}
.v_his li img {width:120px}

#gnb_menu_left {position:fixed;top:0;left:0;width:120px;background-color:#fafafa;border-right:1px solid #dddddd;z-index:100000;height:100%;}
#top_menu_m{display:none;}
#top_menu .menu li a:hover, #top_menu .menu ul li:hover a{
color:#ffff00;
text-decoration:none;
}


#top_menu .menu li ul{
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;

z-index:200;
/*top:1em;
/*left:0;*/
}

#top_menu .menu li:hover ul{
display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
/*
border-bottom:1px solid #11668d;
border-left:1px solid #11668d;
border-right:1px solid #11668d;
*/
}

#top_menu .menu li li {
background:rgba(0,0,0,0.7);
display:block;
float:none;
height: 50px;
margin:0px;
padding:0px 0px;
width:200px;
}

#top_menu .menu li:hover li a{
background:none;
color:#ffffff;
}

#top_menu .menu li ul a{
display:block;
height:50px;
line-height:50px;
font-size:14px;
font-style:normal;
font-weight:400;
margin:0px;
padding:0px 0px 0px 15px;
text-align:left;
}

#top_menu .menu li ul a:hover, #top_menu .menu li ul li:hover >a{
background:rgba(232,158,27,0.9);
border:0px;
color:#ffff00;
text-decoration:none;
}
#top_menu .menu li ul li:hover  ul li{
    display: block;
    padding:0px 0px;
    border:0px;
}
#top_menu .menu li ul ul li:hover >a{
background:rgba(67,157,186,0.9);
border:0px;
color:#ffffff;
text-decoration:none;
margin:0px;
}
#top_menu .menu li ul li ul li{
    display: none;
    margin-top: 2px;
    margin:0px;
}
#top_menu .menu li ul li ul{
    position: absolute;
    background:rgba(20,20,100,0.3);
    top: 0px;
    left: 200px;font-size:12px;
    margin:0px;
    
}
#top_menu .menu li ul li ul a{
  font-size:12px;
    
}

.conleft .conleft_box {clear:both;position:relative;width:690px;margin:0px auto;padding:20px;}
.conleft .conleft_box li{float:left;color:#878787;font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px;zoom:1;*margin-left:10px;padding:10px;line-height:22px;font-weight:200}

/* 자료실 탭 */
.conleft {background-color:#ffffff;border:1px solid #dddddd;}
.conright {position:relative;background-color:#ffffff;border:1px solid #dddddd; /*background:url("/img/free_view_03.png") 0px 0px no-repeat;*/background-color:rgb(120,121,25);}
.conleft ul {float:left;font-size:16px;font-weight:400;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding-left:20px;width:120px;line-height:43px;border-bottom:1px solid #eeeeee;}
.conleft ul.conleft_tab {float:left;position:relative;width:588px; height:43px;padding:0px;text-align:left;}
.conleft ul.conleft_tab li { display:inline-block; *display:inline; *zoom:1; margin-left:-3px; *margin-left:0px; font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:15px;font-weight:400}
.conleft ul.conleft_tab li a{color:#878787; padding:0px 10px 0px 6px; 
font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:15px;}
.conleft ul.conleft_tab li:first-child a { border-left:none;  }
.conleft ul.conleft_tab li.last-col {  margin-right:11px }
.conleft ul.conleft_tab li a.all_t { }	
.conleft ul.conleft_tab li a.design_t { } 
.conleft ul.conleft_tab li a.htmlcss_t { }
.conleft ul.conleft_tab li a.php_t{ }
.conleft ul.conleft_tab li a.logo_t{ }
.conleft ul.conleft_tab li a.plan_t{ }
.conleft ul.conleft_tab li a.site_t{ }
.conleft ul.conleft_tab li a:hover { color:#061834;font-weight:400;}
.conleft ul.conleft_tab li.on a { color:#061834;font-weight:400;border-bottom:2px solid #061834;padding-bottom:8px;}

/*button {height:35px;margin:10px;}*/
td {text-align:center;font-size:16px;font-weight:200;margin:0 auto;line-height:34px;border-bottom:1px solid #dddddd;padding:20px;background-color: #fafafa}

h1 {

		color:#ffffff;
		font-size:30px;
		line-height:80px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		font-weight:lighter;		
		letter-spacing:-1px;
		
	}
h2 {
		font-size:30px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		color:#343434;
		font-weight:500;
		/*text-align:center;*/
		letter-spacing:-1px;
	}
.span3 > p { font-size:12px;letter-spacing:-1px;}
p {color:#121212;}
#warpmain {position:absolute;width:100%;padding:0px;margin:0px auto;/*background:url("/img/main_top_back_01.jpg") 0px 0px no-repeat;background-color:#f2f4f7*/z-index: 999999;transition: 0.2s;}
#warp {position:relative;width:100%;height:430px;padding:0px;margin:0px auto;/*background:url("/img/main_top_back_01.jpg") 0px 0px no-repeat;*//*background-color:#f2f4f7*/}
#warphead {position:relative;width:100%;height:520px;padding:0px;margin:0px auto;/*background:url("/img/main_top_01.jpg") 0px 0px no-repeat #000000;*/background-position: center; background-color:#194858;z-index:-1;}
#warpsub{position:relative;width:100%;height:54px;padding:0px;margin:0px auto;/*background:url("/img/sub_back_top_.jpg") 0px 0px no-repeat;*/}
#con_pf {width:1200px;margin:0px auto;clear:both;height:230px;padding:0px;display:table;}
.conleft {float:left;width:728px;height:220px;display:inline;}
.conright {float:left;width:328px;height:220px;display:inline;left:20px}
#top_gnb {float:right;width:200px;height:54px;border-bottom:0px solid #dedede;/*background-color:rgba(6,24,52,0.1)*/}
#top_gnb .gnb {width:100%;margin:0 auto;color:#00bd39;padding:0px;}
#top_gnb .gnb ul {line-height:54px;float:right}
#top_gnb .gnb ul li {float:left;padding-right:20px;font-size:12px;font-weight:600;}
#top_logo {position:relative;width:100%;height:80px;/*background-color:rgba(6,24,52,0.1)*/}
#top_logo .logo{position:relative;font-size:35px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:bold;color:#ffffff;line-height:80px;padding:0px;letter-spacing:1px;margin-left:221px;}
#top_logo .logo .kor{font-size:20px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:100;color:#ffffff;text-align:center;letter-spacing:2px}

#top_menu {width:1200px;margin:0 auto;height:42px;border-bottom:0px solid #dddddd;border-top:0px solid #11668d;/*background-color:rgba(255,255,255,0.9);border-bottom:1px solid #ffffff;*/z-index:9999;/*-webkit-backdrop-filter: saturate(180%) blur(10px);z-index: 999999;transition: 0.4s;padding: 15px 0px;backdrop-filter: saturate(180%) blur(20px)*/}
#top_menu .menu {position:relative;margin:0;height:42px;width:760px;float:left;transition: 0.4s;}
#top_menu .php_s a.logo{font-weight:900;font-family:'Noto Sans KR',NanumGothic;}

#top_menu .php_s {position:relative;float:left;color:#00bd39;font-weight:bold;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
#top_menu .php_s li {position:relative;float:left;color:#00bd39;font-weight:500;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:42px;padding-left:20px;padding-right:20px;}
#top_menu .php_s li a {position:relative;color:#00bd39;font-weight:500;font-size:18px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;transition: 0.4s;}
#top_menu .php_s li img {position:relative;top:10px;padding-right:10px;}
#top_menu .nomarl_s {position:relative;float:left;color:#000000;font-weight:bold;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;z-index: 999999;}
#top_menu .nomarl_s li {position:relative;float:left;color:#000000;font-weight:500;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:42px;}
#top_menu .nomarl_s li a {position:relative;color:#ffffff;font-weight:500;font-size:18px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;transition: 0.4s;}
.new {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:25px;background-color:#ffbd00;padding:3px;color:#ffffff;position:absolute;top:0px;height:12px;line-height:12px;right:-25px;font-weight:bold;width:12px;text-align:center;border:0px solid #ff60af;}
.sample {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:25px;background-color:#ffffff;padding:3px;color:#000000;position:absolute;top:0px;height:12px;line-height:12px;right:-25px;font-weight:bold;width:12px;text-align:center;border:0px solid #ff60af;}
.sample2 {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:10px;background-color:#00bd39;padding:5px;color:#ffffff;position:relative;top:0px;height:12px;line-height:12px;left:4px;width: 16px;text-align: center;}

.f-nav {z-index:9999; padding:0px;position: fixed !important;}

#footer {position:relative;width:100%;height:150px;background-color:#343434;font-family:'Noto Sans KR', sans-serif;font-weight:300;}
#footer_bar {position:relative;width:100%;height:46px;background-color:#343434;border-top:1px solid #111111;border-bottom:0px solid #111111;}
#footer_bar .notice{margin:0px auto;line-height:26px;font-size:14px;padding:20px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
#footer_bar .notice li span{padding:0;font-weight:600;width: 12px;font-family:'Noto Sans KR', sans-serif;font-weight:300;}
#bottom_a{margin:0px auto;padding:20px;color:#dddddd;font-family:'Noto Sans KR', sans-serif;font-weight:300;}
#bottom_a p{color:#eeeeee;font-weight:200;font-size:12px;letter-spacing:1px;}

#content_main  {width:100%;margin:0px auto; background-color:#ffffff;padding:20px 0;/*background:url("/img/main_back_01.jpg") center 0px no-repeat;*/} 
#content  {width:100%;margin:0px auto; background-color:#f2f4f7;padding:20px 0;/*background:url("/img/main_back_01.jpg") center 0px no-repeat;*/z-index: 0} 
#container {max-width:1200px;margin:0px auto;padding:20px 0px;clear:both;z-index: 0}  

#con_bn {width:1200px;position:relative;margin:0px auto;padding:20px 0;clear:both;height:200px;display:table;z-index: 0;transition: 0.4s}  
#con_bn .conbl {width:730px;float:left;height:200px;transition: 0.4s}

#con_bn .conbr {position:relative;width:328px;float:left;height:198px;;border:1px solid #dddddd; /*background:url("/img/free_view_04.png") 0px 0px no-repeat*/;background-color:rgb(71,55,25);display:inline;left:20px;transition: 0.4s}
/*#con_bn .conbr .on_txt{display:nonewidth:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}*/
#con_bn .conbr .on_txt{display:none;transition: 0.4s;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
#con_bn .conbr .on_txt .picdate{display:none;transition: 0.4s }
#con_bn .conbr .on_txt .title{display:none;transition: 0.4s}
#con_bn .conbr:hover .on_txt{display:block;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;transition: 0.4s}
#con_bn .conbr:hover .on_txt .picdate{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;transition: 0.4s}
#con_bn .conbr:hover .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:400;transition: 0.4s}
.conright .on_txt {display:none;transition: 0.4s}
.conright .on_txt .picdate{display:none;transition: 0.4s}
.conright .on_txt .title{display:none;transition: 0.4s}
.conright:hover .on_txt{display:block;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
.conright:hover .on_txt .picdate{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;font-weight:200}
.conright:hover .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:400;}

#content .box {font-size:12px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
#content .box2 {font-size:14px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
/*.span2 { 
		padding:10px;
		background-color:#000000;
		box-shadow: 5px 5px 5px #eeeeee;
		border: 1px solid #dddddd;
	}*/

.row {
		text-align:center;
	}
}
/* 새글 스킨 (latest) */
.youtube {position:relative;margin-bottom:20px;background:transparent;display: inline-block;}
.youtube .lat_title {display:block;line-height:45px;font-size:20px;color:#253dbe}
.youtube .lat_title a {position:relative;color:#000000;display:inline-block;font-weight: 900;}

.youtube ul {padding:10px 0;display: block;-webkit-box-flex: 1;
    flex: 1;
    flex-wrap: wrap;
  display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;}

.youtube li {position:relative;line-height:18px;margin-bottom:10px;width: 100%;height: 164px;transition: 0.4s ease;z-index: 0;top:0px;left: 0px;margin-right: 5px;padding: 0px !important;overflow: hidden;background-color: #fafafa;    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;}
.youtube li span {padding: 0px 10px;display: block;font-weight: 700;position: relative;top: -350px;transition: 0.4s;z-index: 99999;font-size: 14px;line-height: 20px;}
.youtube li:nth-child(3) {margin-right: 0px;}
.youtube li img {width: 100%;transition: 0.4s ease;z-index: 0;position: relative;transition: 0.4s ;border-radius: 16px}
/*.youtube li:hover {z-index: 10;background-color: #f2f2f2;width: 100%;top:-5px;border-radius: 10px;box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);transform: scale(1);left:0px;position: relative;overflow: hidden;}*/
.youtube li:hover img {z-index: 10;transform: scale(1.05);left:0px;position: relative;overflow: hidden;filter: brightness(30%);border-radius: 0px;}
.youtube li:hover span {padding: 0px 10px;display: block;position: relative;top: -160px;transition: 0.4s;z-index: 99999;color: #ffffff;font-weight: 900:font-size:20px;}
.youtube li:nth-child(1):hover {left:0px;}
.youtube li:nth-child(3):hover {left:0px;}


.youtube li a {font-weight:300;font-size:14px;line-height:18px;vertical-align:middle;color: #e1e1e1}
.youtube li a:hover {color:#3a8afd}
.youtube li .fa-heart {color:#ff0000}
.youtube li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.youtube li .new_icon {display:block;font-size:11px;font-weight:900;color:#ffffff;background:#ff8100;text-align:center;margin-left:2px;vertical-align:middle;top:0px;position: absolute;left:0px;padding: 0px;/*transform: rotate(45deg);*/height: 29px;line-height: 29px;margin: 0px;z-index: 9999;width: 80px;letter-spacing: -1px;border-radius: 0px 20px 20px 0px;}
.youtube li .new_icon::before {
      /*content: '';
      border-right: 26px solid transparent;

    border-bottom: 26px solid #ff0047;*

    /* background: transparent; */
    position: relative;
    /* width: 0px; */
    /* height: 0px; */
   /* top: -10px;
    right: -37px;*/}
.youtube li .new_icon::after {/*border-bottom: 26px solid #ff0047;
    width: 0px;
    border-left: 26px solid transparent;
    height: 0px;*/
    /* background: transparent; */
    /*content: '';
    position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
    /*top: -10px;
    left:-37px;*/}
.youtube li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-caret-right {color:#bbb}
.youtube li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.youtube .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.youtube .empty_li:before {background:none;padding:0}

.youtube .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.youtube a.lt_more {position:relative;top:-2px;right:0px;display:inline-block;width:28px;height:28px;line-height:28px;color:#ffffff;border-radius:14px;text-align:center;font-size: 16px;background-color: #299E3A;transition: 0.3s}
.youtube a.lt_more:after {content: "";transition: 0.3s;}
.youtube a.lt_more:hover {color:#000;background-color: #47b357;transition: 0.3s;width: 50px;}
.youtube a.lt_more:hover:after {content: "❯❯";transition: 0.3s;}

@media (min-width:861px) and (max-width:1299px){
  #warphead_zoon{
  position: relative;
  top:72px;
  width: 861px;display: grid;grid-template-columns: repeat(2,1fr);
  grid-gap: 10px;padding: 0px;margin: 0px auto;
    background-color: transparent;
  height: 400px;
  box-sizing: border-box;

}
  .lnt {position: relative;display: block;width: 820px;height: auto;padding: 0px;margin: 0px auto;clear: both;}
    .lnt ul {padding: 10px 0px;margin: 0px auto; position: relative; display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;clear: both;width: 100%;border-bottom: 1px solid #909090;height: 60px;}
    .lnt ul li {float: left;width: 60px;height: 60px;}
#main_warp {width:100%;margin:0px auto; display:table;position:relative;padding:0px; -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3,1fr);display: inline-grid;
    grid-gap: 20px;box-sizing: border-box;padding: 0px 20px;}
.service_guide_01{clear:both;padding:30px;border-radius: 20px;background-color: #fafafa;transition: 0.4s;cursor: pointer;border:0px solid #dddddd;position: relative;top:0px;left: 0px}
.service_guide_01 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;transition: 0.4s;}
.service_guide_01 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_01 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_01 div li{padding:20px 0;transition: 0.4s;transition: 0.4s;}
.service_guide_01 div li span {font-weight:600;color:#000000;transition: 0.4s;}
.service_guide_01:hover div h3 {transition: 0.5s;color: #ff0000;font-size: 30px;}
.service_guide_01:hover div li {transition: 0.5s;color: #323232;transition: 0.4s ease;}
.service_guide_01:hover div li span{transition: 0.5s;color: #ff0000;}
.service_guide_01:hover {border:1px solid #dddddd; box-sizing: border-box; background-color: #ffffff;transition: 0.4s;box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.9);top:-10px;left:-10px;}
.service_guide_02{clear:both;padding:30px;border-radius: 20px;background-color: #eaeaea;position: relative;top:0px;left: 0px;transition: 0.5s;cursor: pointer;}
.service_guide_02 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_02 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;transition: 0.5s;}
.service_guide_02 div li{padding:20px 0;transition: 0.5s;}
.service_guide_02 div li span {font-weight:600;color:#000000;transition: 0.5s;}
.service_guide_02 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_02:hover div h3 {transition-duration: 0.5s ;color: #ffffff;font-size: 30px;border-bottom:0px solid #ffffff;}
.service_guide_02:hover div li {transition: 0.5s;color: #ffffff;}
.service_guide_02:hover div li span{transition: 0.5s;color: #ffff00;}
.service_guide_02:hover {background-color: #ea372c;transition: 0.4s;border:0px solid #1c294d;box-sizing: border-box;box-shadow: 0px 0px 5px 5px rgba(235,83,74,0.9);top:-10px;left:-10px;}
.service_guide_02 img {width:80%;padding:20px}
.service_guide_01 img {width:80%;padding:20px}

.service_guide_03{clear:both;padding:30px 0px;max-width:1080px;margin:0 auto;}
.service_guide_03 div {width:100%;font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200;line-height: 26px;}
.service_guide_03 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;color: #000000;}
.service_guide_03 div li{padding:20px 0;color:#343434}
.service_guide_03 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_03 div li span {font-weight:500;color:#000000}

.v_msg {font-size:20px;padding:20px 10px;clear:both;font-family:'Noto Sans KR', sans-serif;}
.v_msg li {line-height:33px;font-weight:300;letter-spacing:0.5px;}
.v_msg li span{background-color:#00290c;color:#ffffff;}
.v_about {display:table;padding:20px 10px;/*background:url("/img/vb_001.png") 600px 90px no-repeat;width:100%;*/}
.v_about li {width:300px;font-size:16px;line-height:30px;float:left;padding:0px;}
.v_about li img {width: 300px}
.v_his {display:table;padding:20px 10px;font-family:'Noto Sans KR', sans-serif;}
.v_his h3 {padding:20px 0;font-size:20px;font-weight:500;}
.v_his li {font-size:12px;line-height:18px;float:left;padding:0 30px 0 0;font-weight:300;letter-spacing:0.5px;}
.v_his li img {width:120px}

#warphead


#warphead h2{top:90px;font-size:16px;font-weight:200;color:#FFFFFF;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:20px;letter-spacing: -2px;}

#gnb_menu_left {position:fixed;top:0;left:0;width:180px;background-color:#eeeeee;border-right:1px solid #dddddd;z-index:100000;height:100%;display:none;}
#top_menu_m{display: none;}
#top_menu .menu li a:hover, #top_menu .menu ul li:hover a{
color:#88bbee;
text-decoration:none;
}


#top_menu .menu li ul{
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;

z-index:200;
/*top:1em;
/*left:0;*/
}

#top_menu .menu li:hover ul{
display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
/*
border-bottom:1px solid #11668d;
border-left:1px solid #11668d;
border-right:1px solid #11668d;
*/
}

#top_menu .menu li li {
background:rgba(0,0,0,0.8);
display:block;
float:none;
margin:0px;
height: 40px;
padding:0px;
width:200px;
}

#top_menu .menu li:hover li a{
background:none;
color:#ffffff;
}

#top_menu .menu li ul a{
display:block;
height:40px;
line-height:40px;
font-size:12px;
font-style:normal;
font-weight:400;
margin:0px;
padding:0px 0px 0px 15px;
text-align:left;
}

#top_menu .menu li ul a:hover, #top_menu .menu li ul li:hover >a{
background:rgba(255,170,0,1);
border:0px;
color:#232323;
text-decoration:none;
}

#top_menu .menu li ul li:hover  ul li{
    display: block;
    padding:0px 0px;
    border:0px;
}
#top_menu .menu li ul ul li:hover >a{
background:rgba(67,157,186,0.9);
border:0px;
color:#ffffff;
text-decoration:none;
margin:0px;
}
#top_menu .menu li ul li ul li{
    display: none;
    margin-top: 2px;
    margin:0px;
}
#top_menu .menu li ul li ul{
    position: absolute;
    background:rgba(20,20,100,0.3);
    top: 0px;
    left: 200px;font-size:12px;
    margin:0px;
    
}
#top_menu .menu li ul li ul a{
  font-size:12px;
    
}
/*#top_menu .menu li ul a:hover, #top_menu .menu li ul li:hover a{
background:rgba(255,255,255,1);
border:0px;
color:#11668d;
text-decoration:none;
}*/
.conleft .conleft_box {clear:both;position:relative;width:85%;margin:0px auto;padding:10px;}
.conleft .conleft_box li{float:left;color:#878787;font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; height:20px;zoom:1;*margin-left:10px;padding:10px;}

/* 자료실 탭 */
.conleft {background-color:#ffffff;border:px solid #dddddd;}
.conright {position:relative;background-color:#ffffff;border:1px solid #dddddd; /*background:url("/img/free_view_03.png") 0px 0px no-repeat;*/background-color:rgb(120,121,25);}
.conleft ul {float:left;font-size:12px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;margin-left:0px;width:100%;line-height:43px;border-bottom:1px solid #eeeeee;}
.conleft ul.conleft_tab {float:left;position:relative;width:100%; height:43px;padding:0px;text-align:left;}
.conleft ul.conleft_tab li { display:inline-block; *display:inline; *zoom:1; margin-left:-3px; *margin-left:0px; font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li a{color:#878787; padding:0px 10px 0px 6px; 
font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li:first-child a { border-left:none;  }
.conleft ul.conleft_tab li.last-col {  margin-right:11px }
.conleft ul.conleft_tab li a.all_t { }	
.conleft ul.conleft_tab li a.design_t { } 
.conleft ul.conleft_tab li a.htmlcss_t { }
.conleft ul.conleft_tab li a.php_t{ }
.conleft ul.conleft_tab li a.logo_t{ }
.conleft ul.conleft_tab li a.plan_t{ }
.conleft ul.conleft_tab li a.site_t{ }
.conleft ul.conleft_tab li a:hover { color:#061834;font-weight:bold;}
.conleft ul.conleft_tab li.on a { color:#061834;font-weight:bold;border-bottom:4px solid #061834;padding-bottom:8px;}
button {margin:10px;}
body {margin:0;font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;/*background:url("/img/back_05_my.jpg") fixed;-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/}
td {width:100px;text-align:center;font-size:13px;font-weight:200;margin:0 auto;line-height:20px;border-bottom:1px solid #dddddd;padding:10px;background-color: #fafafa}

th {line-height:40px;font-size:16px;font-weight:500;margin:0 auto;border-bottom:1px solid #dddddd;background-color:#ffffff;}
h1 {
		text-align:center;
		color:#00ab33;
		font-size:30px;
		margin:0px 0;
		line-height:50px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		font-weight:lighter;			
		letter-spacing:-1px;
	}
h2 {
		font-size:15px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		color: #343434;
		font-weight:500;
		/*text-align:center;*/
		letter-spacing:-1px;
	}
	p {color:#00000;font-size:12px;}
	#warpmain {position:absolute;width:100%;padding:0px;margin:0px auto;height:85px;/*background:url("/img/main_top_back_01.jpg") 0px 0px no-repeat;background-color:#f2f4f7*/z-index: 99999999}
#warp {position:relative;width:100%;height:300px;background-color:#ffffff;padding:0px;margin:0px;display:table;background:url("/img/main_top_back_01.jpg") 0 0px no-repeat;}
#warphead {position:relative;width:100%;height:400px;padding:0px;margin:0px auto;/*background:url("/img/main_top_01.jpg") 0px 0px no-repeat #000000;background-position: center; */background-color:#194858;z-index:-1; padding-bottom: 92px;}
#warpsub{position:relative;width:100%;height:50px;padding:0px;margin:0px auto;/*background:url("/img/sub_back_top_.jpg") 0px 0px no-repeat;*/}
#warp h1{padding-top:50px;padding-bottom:10px;font-size:60px;font-weight:300;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;position:relative;}
#warp h2{padding-top:0px;font-size:35px;font-weight:200;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:36px;}
#con_pf {width:100%;margin:0px auto;clear:both;padding:0px;display:table;}

.conright {clear:both;width:100%;height:240px;display:table;}
#top_gnb {position:relative;width:100%;height:32px;border-bottom:1px solid #00bd39;background-color:rgba(255,255,255,0.9)}
#top_gnb .gnb {margin:0 auto;color:#00bd39;font-weight:600}
#top_gnb .gnb ul {line-height:32px;float:right}
#top_gnb .gnb ul li {float:left;padding:0 10px;font-size:12px;}
#top_logo {position:relative;width:100%;height:50px;background-color:rgba(6,24,52,0.5);}
#top_logo .logo{position:relative;max-width:800px;font-size:20px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:bold;color:#ffffff;line-height:50px;text-align:center;letter-spacing:1px}
#top_logo .logo .kor{font-size:0px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:100;color:#ffffff;text-align:center;letter-spacing:2px}


#top_menu .menu {position:relative;margin:0;height:54px;width:760px;float:left;transition: 0.4s;}
#top_menu .php_s a.logo{font-weight:900;font-family:'Noto Sans KR',NanumGothic;}

#top_menu .php_s {position:relative;float:left;color:#00bd39;font-weight:bold;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
#top_menu .php_s li {position:relative;float:left;color:#00bd39;font-weight:500;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:42px;}
#top_menu .php_s li a {position:relative;color:#00bd39;font-weight:500;font-size:18px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;transition: 0.4s;}
#top_menu .php_s li img {position:relative;top:10px;padding-right:10px;}
#top_menu .nomarl_s {position:relative;float:left;color:#000000;font-weight:bold;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;z-index: 999999;}
#top_menu .nomarl_s li {position:relative;float:left;color:#000000;font-weight:500;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:42px;}
#top_menu .nomarl_s li a {position:relative;color:#ffffff;font-weight:500;font-size:18px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;transition: 0.4s;}
.new {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:25px;background-color:#00bd39;padding:3px;color:#ffffff;position:absolute;top:0px;height:12px;line-height:12px;right:-25px;font-weight:bold;width:12px;text-align:center;border:0px solid #ff60af;}
.sample {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:25px;background-color:#ffffff;padding:3px;color:#000000;position:absolute;top:0px;height:12px;line-height:12px;right:-25px;font-weight:bold;width:12px;text-align:center;border:0px solid #ff60af;}
.sample2 {font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:9px;border-radius:10px;background-color:#00bd39;padding:5px;color:#ffffff;position:absolute;top:0px;height:12px;line-height:12px;left:-4px;}

.f-nav {z-index:9999;position: fixed !important;}

#con_pf {width:100%;margin:0px auto;clear:both;display:table;}
.conleft {clear:both;width:100%;height:220px;}
.conright {clear:both;width:100%;height:220px;}
#footer {position:relative;width:100%;height:100px;background-color:#343434;padding-bottom:50px;}
#footer_bar {position:relative;width:100%;background-color:#343434;border-top:1px solid #dddddd;border-bottom:0px solid #dddddd;}
#footer_bar .notice{width:100%;margin:0px auto;padding:0 0px;line-height:35px;font-size:12px;}
#footer_bar .notice li span{padding:0 10px;font-weight:600;}
#bottom_a{max-width:100%;margin:0px auto;padding:20px 10px;font-size:14px;color:#f1f1f1;}
#bottom_a p{color:#f1f1f1;padding:5px 0px;}

#container {width:100%;margin:0px auto;padding:20px 0;display:table;}
#content_main  {width:100%;margin:0px auto; background-color:#ffffff;padding:20px 0;/*background:url("/img/main_back_01.jpg") center 0px no-repeat;*/position: relative;} 
#content  {width:100%;margin:0px auto; background-color:#ffffff;padding:0px;} 
/*img {padding:0 0 20px 0;width:80%;}*/
#content h1{padding-top:70px;font-size:27px;font-weight:700;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;letter-spacing: -2px;line-height: 34px;}
#content h2{padding-top:3px;font-size:20px;font-weight:300;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}

#con_bn {width:100;margin:0px auto;padding:0px;clear:both;display:table;background-color:#ffffff;z-index: 0;}  
#con_bn .conbl {width:100%x;}

#con_bn .conbr {position:relative;width:100%;float:left;height:198px;;border:1px solid #dddddd; /*background:url("/img/free_view_04.png") 0px 0px no-repeat*/;background-color:rgb(71,55,25);display:inline;left:20px;transition: 0.4s}
/*#con_bn .conbr .on_txt{display:nonewidth:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}*/
/*#con_bn .conbr .on_txt{display:none}
#con_bn .conbr .on_txt .picdate{display:none }
#con_bn .conbr .on_txt .title{display:none}*/
#con_bn .conbr .on_txt{display:table;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
#con_bn .conbr .on_txt .picdate{display:display;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
#con_bn .conbr .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}
/*.conright .on_txt {display:none}
.conright .on_txt .picdate{display:none }
.conright .on_txt .title{display:none}*/
.on_txt{display:block;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
.conright .on_txt .picdate{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
.conright .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}

#content .box {font-size:12px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px; }
#content .box2 {font-size:14px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px;  }
.row {
		text-align:center;
	}
.span3 > p { font-size:12px;letter-spacing:-1px;}

/* 새글 스킨 (latest) */
.youtube {position:relative;margin-bottom:20px;background:transparent;display: inline-block;}
.youtube .lat_title {display:block;line-height:45px;font-size:20px;color:#253dbe}
.youtube .lat_title a {position:relative;color:#000000;display:inline-block;font-weight: 900;}

.youtube ul {padding:10px 0;display: block;}

.youtube li {position:relative;line-height:18px;margin-bottom:10px;float: left;width: 356px;height: 200px;transition: 0.4s ease;z-index: 0;top:0px;left: 0px;margin-right: 5px;padding: 0px !important;overflow: hidden;background-color: #fafafa;    ;}
.youtube li span {padding: 0px 10px;display: block;font-weight: 700;position: relative;top: -350px;transition: 0.4s;z-index: 99999;font-size: 14px;line-height: 20px;}
.youtube li:nth-child(3) {margin-right: 0px;}
.youtube li img {width: 356px;transition: 0.4s ease;z-index: 0;position: relative;transition: 0.4s }
.youtube li:hover {z-index: 10;background-color: #f2f2f2;width: 356px;top:-5px;border-radius: 10px;box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);transform: scale(1);left:0px;position: relative;overflow: hidden;}
.youtube li:hover img {z-index: 10;transform: scale(1);left:0px;position: relative;overflow: hidden;filter: brightness(30%);}
.youtube li:hover span {padding: 0px 10px;display: block;position: relative;top: -200px;transition: 0.4s;z-index: 99999;color: #ffffff;font-weight: 900:font-size:20px;}
.youtube li:nth-child(1):hover {left:0px;}
.youtube li:nth-child(3):hover {left:0px;}

.youtube li a {font-weight:300;font-size:14px;line-height:18px;vertical-align:middle;color: #e1e1e1}
.youtube li a:hover {color:#3a8afd}
.youtube li .fa-heart {color:#ff0000}
.youtube li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.youtube li .new_icon {display:block;font-size:11px;font-weight:900;color:#ffffff;background:#ff8100;text-align:center;margin-left:2px;vertical-align:middle;top:0px;position: absolute;left:0px;padding: 0px;/*transform: rotate(45deg);*/height: 29px;line-height: 29px;margin: 0px;z-index: 9999;width: 80px;letter-spacing: -1px;border-radius: 0px 20px 20px 0px;}
.youtube li .new_icon::before {
      /*content: '';
      border-right: 26px solid transparent;

    border-bottom: 26px solid #ff0047;*/

    /* background: transparent; */
   /* position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
   /* top: -10px;
    right: -37px;*/}
.youtube li .new_icon::after {/*border-bottom: 26px solid #ff0047;
    width: 0px;
    border-left: 26px solid transparent;
    height: 0px;*/
    /* background: transparent; */
   /* content: '';
    position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
    /*top: -10px;
    left:-37px;*/}
.youtube li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-caret-right {color:#bbb}
.youtube li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.youtube .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.youtube .empty_li:before {background:none;padding:0}

.youtube .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.youtube .lt_more {position:absolute;top:11px;right:0;display:block;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.youtube .lt_more:hover {color:#777}
}
@media (max-width:860px){
    #warphead_zoon{
  position: relative;
  top:72px;
  width: 100%;display: grid;grid-template-columns: repeat(1,1fr);
  grid-gap: 10px;padding: 10px;margin: 0px auto;
    background-color: transparent;
  height: 400px;
  box-sizing: border-box;

}
   .lnt {position: relative;display: block;height: auto;padding: 0px;margin: 0px auto;width: 100%;}
    .lnt ul {padding: 10px 0px;margin: 0px auto; position: relative; display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;clear: both;width: 100%;border-bottom: 1px solid #909090;height: 50px;}
    .lnt ul li {float: left;width: 50px;height: 50px;}
#main_warp {width:100%;margin:0px auto; display:table;position:relative;padding:0px; -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2,1fr);display: inline-grid;
    grid-gap: 20px;box-sizing: border-box;padding: 0px 20px;}
.service_guide_01{clear:both;padding:30px;cursor: default;}
.service_guide_01 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
.service_guide_01 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_01 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_01 div li{padding:20px 0;}
.service_guide_01 div li span {font-weight:600;color:#000000}
.service_guide_01:hover div h3 {transition: 0.5s;color: #000000;font-size: 20px;}
.service_guide_01:hover div li {transition: 0.5s;color: #434343;}
.service_guide_01:hover div li span{transition: 0.5s;color: #000000;}
.service_guide_01:hover {border:0px solid #dddddd; box-sizing: border-box; background-color: #fefefe;transition: 0.4s;box-shadow: 0px 0px 0px 0px rgba(200,200,200,0.9);top:0px;left:0px;}
.service_guide_02{clear:both;padding:30px;cursor: default;}
.service_guide_02 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_02 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
.service_guide_02 div li{padding:20px 0;}
.service_guide_02 div li span {font-weight:600;color:#000000}
.service_guide_02 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_02:hover div h3 {transition: 0.5s;color: #000000;font-size: 20px;}
.service_guide_02:hover div li {transition: 0.5s;color:#000000;}
.service_guide_02:hover div li span{transition: 0.5s;color: #000000;}
.service_guide_02:hover {border:0px solid #dddddd; box-sizing: border-box; background-color: #eaeaea;transition: 0.4s;box-shadow: 0px 0px 0px 0px rgba(200,200,200,0.9);top:0px;left:0px;}
.service_guide_02 img {width:80%;padding:20px}
.service_guide_01 img {width:80%;padding:20px}

.service_guide_03{clear:both;padding:30px 0px;max-width:860px;margin:0 auto;}
.service_guide_03 div {width:100%;font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200;line-height: 26px;}
.service_guide_03 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;color: #000000;}
.service_guide_03 div li{padding:20px 0;color:#343434}
.service_guide_03 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_03 div li span {font-weight:500;color:#000000}

.v_msg {font-size:20px;padding:20px 10px;clear:both;font-family:'Noto Sans KR', sans-serif;}
.v_msg li {line-height:33px;font-weight:300;letter-spacing:0.5px;}
.v_msg li span{background-color:#00290c;color:#ffffff;}
.v_about {display:table;padding:20px 10px;/*background:url("/img/vb_001.png") 600px 90px no-repeat;width:100%;*/}
.v_about li {width:300px;font-size:16px;line-height:30px;float:left;padding:0px;}
.v_about li img {width: 300px}
.v_his {display:table;padding:20px 10px;font-family:'Noto Sans KR', sans-serif;}
.v_his h3 {padding:20px 0;font-size:20px;font-weight:500;}
.v_his li {font-size:12px;line-height:18px;float:left;padding:0 30px 0 0;font-weight:300;letter-spacing:0.5px;}
.v_his li img {width:120px}




#warphead h2{top:220px !important;font-size:16px;font-weight:200;color:#FFFFFF;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:20px;letter-spacing: -2px;position: relative;}

#gnb_menu_left {position:fixed;top:0;left:0;width:180px;background-color:#eeeeee;border-right:1px solid #dddddd;z-index:100000;height:100%;display:none;}
#top_menu .menu li a:hover, #top_menu .menu ul li:hover a{
/*color:#ffffff;*/
text-decoration:none;
}
#top_menu {display: none;}
#top_menu .menu ul li .new{
color:#ffffff;
/*background-color:#ffffff;*/
font-size:11px;
font-weight:normal;
z-index:10000;
padding:0 0px;
}
#top_menu .menu li ul{
/*background: rgba(255,255,255,0.8);*/
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
/*position:absolute;*/

z-index:200;
/*top:1em;
/*left:0;*/
}

#top_menu .menu li ul{
display:table; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
clear:both;
/*border-bottom:1px solid #11668d;
border-left:1px solid #11668d;
border-right:1px solid #11668d;*/
}

#top_menu_m .menu_m li li {
background:rgba(230,230,230,0.4);
border:0px;
border-bottom:1px solid rgba(200,200,200,0.4);
margin:0px;
padding:3px;
color:#dddddd;
font-size:12px;
}

#top_menu .menu li:hover li a{
background:none;
}

#top_menu .menu li ul a{
/*display:block;*/
line-height:16px;
font-size:12px;
font-style:normal;
font-weight:400;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
color:#aaaaaa;
}

/*#top_menu .menu li ul a:hover, #top_menu .menu li ul li:hover a{
background:rgba(255,255,255,1);
border:0px;
color:#11668d;
text-decoration:none;
}*/
.conleft .conleft_box {clear:both;position:relative;width:85%;margin:0px auto;padding:10px;}
.conleft .conleft_box li{float:left;color:#878787;font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; height:20px;zoom:1;*margin-left:10px;padding:10px;}

/* 자료실 탭 */
.conleft {background-color:#ffffff;border:px solid #dddddd;}
.conright {position:relative;background-color:#ffffff;border:1px solid #dddddd; /*background:url("/img/free_view_03.png") 0px 0px no-repeat;*/background-color:rgb(120,121,25);}
.conleft ul {float:left;font-size:12px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;margin-left:0px;width:100%;line-height:43px;border-bottom:1px solid #eeeeee;}
.conleft ul.conleft_tab {float:left;position:relative;width:100%; height:43px;padding:0px;text-align:left;}
.conleft ul.conleft_tab li { display:inline-block; *display:inline; *zoom:1; margin-left:-3px; *margin-left:0px; font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li a{color:#878787; padding:0px 10px 0px 6px; 
font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li:first-child a { border-left:none;  }
.conleft ul.conleft_tab li.last-col {  margin-right:11px }
.conleft ul.conleft_tab li a.all_t { }	
.conleft ul.conleft_tab li a.design_t { } 
.conleft ul.conleft_tab li a.htmlcss_t { }
.conleft ul.conleft_tab li a.php_t{ }
.conleft ul.conleft_tab li a.logo_t{ }
.conleft ul.conleft_tab li a.plan_t{ }
.conleft ul.conleft_tab li a.site_t{ }
.conleft ul.conleft_tab li a:hover { color:#061834;font-weight:bold;}
.conleft ul.conleft_tab li.on a { color:#061834;font-weight:bold;border-bottom:4px solid #061834;padding-bottom:8px;}
button {margin:10px;}
body {margin:0;font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;/*background:url("/img/back_05_my.jpg") fixed;-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/}
td {width:100px;text-align:center;font-size:13px;font-weight:200;margin:0 auto;line-height:20px;border-bottom:1px solid #dddddd;padding:10px;background-color: #fafafa}

th {line-height:40px;font-size:16px;font-weight:500;margin:0 auto;border-bottom:1px solid #dddddd;background-color:#ffffff;}
h1 {
		text-align:center;
		color:#00ab33;
		font-size:30px;
		margin:0px 0;
		line-height:50px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		font-weight:lighter;			
		letter-spacing:-1px;
	}
h2 {
		font-size:15px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		color: #343434;
		font-weight:500;
		/*text-align:center;*/
		letter-spacing:-1px;
	}
	p {color:#000000;font-size:12px;}
	#warpmain {position:absolute;width:100%;padding:0px;margin:0px auto;height:50px;/*background:url("/img/main_top_back_01.jpg") 0px 0px no-repeat;background-color:#f2f4f7*/z-index: 2;}
#warp {position:relative;width:100%;height:300px;background-color:#ffffff;padding:0px;margin:0px;display:table;background:url("/img/main_top_back_01.jpg") 0 0px no-repeat;}
#warphead {position:relative;width:100%;height:840px;padding:0px;margin:0px auto;/*background:url("/img/main_top_01.jpg") 0px 0px no-repeat #000000;background-position: center; */background-color:#194858;z-index:-1;padding-bottom: 92px;}
#warpsub{position:relative;width:100%;height:50px;padding:0px;margin:0px auto;/*background:url("/img/sub_back_top_.jpg") 0px 0px no-repeat;*/}
#warp h1{padding-top:50px;padding-bottom:10px;font-size:60px;font-weight:300;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;position:relative;}
#warp h2{padding-top:0px;font-size:35px;font-weight:200;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:36px;}
#con_pf {width:100%;margin:0px auto;clear:both;padding:0px;display:table;}

.conright {clear:both;width:100%;height:240px;display:table;}
#top_gnb {position:relative;width:100%;height:32px;border-bottom:1px solid #00bd39;background-color:rgba(255,255,255,0.9)}
#top_gnb .gnb {margin:0 auto;color:#00bd39;font-weight:600}
#top_gnb .gnb ul {line-height:32px;float:right}
#top_gnb .gnb ul li {float:left;padding:0 10px;font-size:12px;}
#top_logo {position:relative;width:100%;height:50px;background-color:rgba(6,24,52,0.5);}
#top_logo .logo{position:relative;max-width:800px;font-size:20px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:bold;color:#ffffff;line-height:50px;text-align:center;letter-spacing:1px}
#top_logo .logo .kor{font-size:0px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:100;color:#ffffff;text-align:center;letter-spacing:2px}
#top_menu_m {display: block;z-index: 99999}
#top_menu_m {width:100%;border-bottom:1px solid rgba(0,189,57,0.9);background-color:rgba(255,255,255,0.9);top:0;z-index:20000;line-height:50px;-webkit-backdrop-filter: saturate(180%) blur(5px);min-height:50px;z-index: 99999}
#top_menu_m #logo{position:absolute;top:0px;left:20px;z-index:3000;line-height:50px}
#top_menu_m #logo a {color:#00bd39;font-weight:bold;}
#top_menu .menu {position:relative;max-width:800px;margin:0 auto;display:none;}
#top_menu_m .button_m {position:absolute;max-width:800px;margin:0 auto;padding-right:15px;font-size:15px;color:#00bd39;font-weight:900;right:15px;z-index:200000;cursor:pointer}
#top_menu_m .menu_m {position:relative;max-width:800px;margin:0 auto;padding:50px 0px 20px 0px;z-index: 99999}
#top_menu_m .php_s_m {color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;text-align:center;position: relative;}
#top_menu_m .php_s_m li {position: relative;color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:36px;margin:0 20px;border-bottom:1px solid rgba(200,200,200,0.3);}
#top_menu_m .php_s_m li a {color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
#top_menu_m .nomarl_s_m {position: relative;color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;text-align:center;}
#top_menu_m .nomarl_s_m li {position: relative;color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:36px;margin:0 20px;border-bottom:1px solid rgba(200,200,200,0.3);}
#top_menu_m .nomarl_s_m li a {color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
.new {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ffff00;padding:3px;color:#000000;top:10px;left:10px;margin:4px;}
.sample {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ffff00;padding:3px;color:#000000;top:10px;left:10px;margin:4px;}
.sample2 {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ff0000;padding:3px;color:#ffffff;top:-15px;height:14px;line-height:14px;margin:4px;}

.f-navm {z-index:9999; position:fixed !important; left:0; top:0; width:100%;}

#con_pf {width:100%;margin:0px auto;clear:both;display:table;}
.conleft {clear:both;width:100%;height:220px;}
.conright {clear:both;width:100%;height:220px;}
#footer {position:relative;width:100%;height:100px;background-color:#343434;padding-bottom:50px;}
#footer_bar {position:relative;width:100%;background-color:#343434;border-top:1px solid #dddddd;border-bottom:0px solid #dddddd;}
#footer_bar .notice{width:100%;margin:0px auto;padding:0 0px;line-height:35px;font-size:12px;}
#footer_bar .notice li span{padding:0 10px;font-weight:600;}
#bottom_a{max-width:100%;margin:0px auto;padding:20px 10px;font-size:14px;color:#dddddd;}
#bottom_a p{color:#eeeeee;padding:5px 0px;}

#container {width:100%;margin:0px auto;padding:20px 0;display:table;}
#content_main  {width:100%;margin:0px auto; background-color:#ffffff;padding:20px 0;/*background:url("/img/main_back_01.jpg") center 0px no-repeat;*/position: relative;} 
#content  {width:100%;margin:0px auto; background-color:#ffffff;padding:0px;} 
img {padding:0 0 20px 0;}
#content h1{padding-top:70px;font-size:27px;font-weight:700;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;letter-spacing: -2px;line-height: 34px;}
#content h2{padding-top:3px;font-size:20px;font-weight:300;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}

#con_bn {width:100;margin:0px auto;padding:0px;clear:both;display:table;background-color:#ffffff;z-index: 0;}  
#con_bn .conbl {width:100%;}

#con_bn .conbr {position:relative;width:100%;float:left;height:198px;;border:1px solid #dddddd; /*background:url("/img/free_view_04.png") 0px 0px no-repeat*/;background-color:rgb(71,55,25);display:inline;left:20px;transition: 0.4s}
/*#con_bn .conbr .on_txt{display:nonewidth:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}*/
/*#con_bn .conbr .on_txt{display:none}
#con_bn .conbr .on_txt .picdate{display:none }
#con_bn .conbr .on_txt .title{display:none}*/
#con_bn .conbr .on_txt{display:table;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
#con_bn .conbr .on_txt .picdate{display:display;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
#con_bn .conbr .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}
/*.conright .on_txt {display:none}
.conright .on_txt .picdate{display:none }
.conright .on_txt .title{display:none}*/
.on_txt{display:block;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
.conright .on_txt .picdate{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
.conright .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}

#content .box {font-size:12px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px; }
#content .box2 {font-size:14px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px;  }
.row {
		text-align:center;
	}
.span3 > p { font-size:12px;letter-spacing:-1px;}

.youtube {position:relative;margin-bottom:20px;overflow:hidden;background:transparent;}
.youtube .lat_title {display:block;line-height:45px;font-size:20px;color:#253dbe}
.youtube .lat_title a {position:relative;color:#000000;display:inline-block;font-weight: 900;}

.youtube ul {padding:10px 0;display: block;}

.youtube li {position:relative;line-height:18px;margin-bottom:10px;float: left;width: 100%;height: 400px;transition: 0.4s ease;z-index: 0;top:0px;left: 0px;margin-right: 5px;padding: 0px !important;overflow: hidden;background-color: #fafafa;margin-right: 0px;}
.youtube li span {padding: 0px 10px;display: block;font-weight: 700;position: relative;transition: 0.4s;z-index: 99999;font-size: 14px;line-height: 20px;top:0px;}
.youtube li:nth-child(3) {margin-right: 0px;}
.youtube li img {width: 100%;transition: 0.4s ease;z-index: 0;position: relative;transition: 0.4s }
.youtube li:hover {z-index: 10;background-color: #f2f2f2;width: 100%;top:0px;border-radius: 10px;box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);transform: scale(1);left:0px;position: relative;overflow: hidden;}
.youtube li:hover img {z-index: 10;transform: scale(1);left:0px;position: relative;overflow: hidden;filter: brightness(100%);}
.youtube li:hover span {padding: 0px 10px;display: block;position: relative;transition: 0.4s;z-index: 99999;color: #000000;font-weight: 900:font-size:20px;top:0px;}
.youtube li:nth-child(1):hover {left:0px;}
.youtube li:nth-child(3):hover {left:0px;}

.youtube li a {font-weight:300;font-size:12px;line-height:18px;vertical-align:middle;color: #e1e1e1}
.youtube li a:hover {color:#3a8afd}
.youtube li .fa-heart {color:#ff0000}
.youtube li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.youtube li .new_icon {display:block;font-size:11px;font-weight:900;color:#ffffff;background:#ff8100;text-align:center;margin-left:2px;vertical-align:middle;top:0px;position: absolute;left:0px;padding: 0px;/*transform: rotate(45deg);*/height: 29px;line-height: 29px;margin: 0px;z-index: 9999;width: 80px;letter-spacing: -1px;border-radius: 0px 20px 20px 0px;}
.youtube li .new_icon::before {
      /*content: '';
      border-right: 26px solid transparent;

    border-bottom: 26px solid #ff0047;
*/
    /* background: transparent; */
    position: relative;
    /* width: 0px; */
    /* height: 0px; */
    top: -10px;
    right: -37px;}
.youtube li .new_icon::after {/*border-bottom: 26px solid #ff0047;
    width: 0px;
    border-left: 26px solid transparent;
    height: 0px;*/
    /* background: transparent; */
   /* content: '';
    position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
    /*top: -10px;
    left:-37px;*/}
.youtube li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-caret-right {color:#bbb}
.youtube li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.basic_li img {text-align: center;margin: 0px auto;width: 100%;display: table;}
.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.youtube .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.youtube .empty_li:before {background:none;padding:0}

.youtube .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.youtube .lt_more {position:absolute;top:11px;right:0;display:block;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.youtube .lt_more:hover {color:#777}
}
@media (max-width:700px){
  #warphead_zoon{
  position: relative;
  top:72px;
  width: 100%;display: grid;grid-template-columns: repeat(1,1fr);
  grid-gap: 10px;padding: 20px;margin: 0px auto;
    background-color: transparent;
  height: 400px;
  box-sizing: border-box;

}
.lnt {position: relative;display: block;height: auto;padding: 0px;margin: 0px auto;clear: both;width: 100%;}
    .lnt ul {padding: 10px 0px;margin: 0px auto; position: relative;display: block;clear: both;width: 100%;border-bottom: 1px solid #909090;height: 60px;display: grid;grid-template-columns: repeat(7,1fr);
    grid-gap: 0px;}
    .lnt ul li {/*float: left;width: 40px;height: 40px;*/}
#main_warp {width:100%;margin:0px auto; display:table;position:relative;padding:0px; -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1,1fr);display: inline-grid;
    grid-gap: 20px;box-sizing: border-box;padding: 0px;}
.service_guide_01{clear:both;padding:30px}
.service_guide_01 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
.service_guide_01 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_01 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_01 div li{padding:20px 0;}
.service_guide_01 div li span {font-weight:600;color:#000000}
.service_guide_02{clear:both;padding:30px}
.service_guide_02 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_02 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}
.service_guide_02 div li{padding:20px 0;}
.service_guide_02 div li span {font-weight:600;color:#000000}
.service_guide_02 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200}
.service_guide_02 img {width:80%;padding:20px}
.service_guide_01 img {width:80%;padding:20px}


.service_guide_03{clear:both;padding:30px 0px;max-width:700px;margin:0 auto;}
.service_guide_03 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200;line-height: 26px;}
.service_guide_03 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;color: #000000;}
.service_guide_03 div li{padding:20px 0;color:#343434}
.service_guide_03 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_03 div li span {font-weight:500;color:#000000}

.v_msg {font-size:20px;padding:20px 10px;clear:both;font-family:'Noto Sans KR', sans-serif;}
.v_msg li {line-height:33px;font-weight:300;letter-spacing:-1px;}
.v_msg li span{background-color:#00290c;color:#ffffff;}
.v_about {display:table;padding:20px 10px;/*background:url("/img/vb_001.png") 600px 90px no-repeat;width:100%;*/}
.v_about li {width:100%;font-size:16px;line-height:26px;float:left;padding:0px;letter-spacing: -1px;}
.v_about li img {width: 300px}

.v_his {display:table;padding:20px 10px;font-family:'Noto Sans KR', sans-serif;}
.v_his h3 {padding:20px 0;font-size:20px;font-weight:500;}
.v_his li {font-size:12px;line-height:18px;float:left;padding:0 30px 0 0;font-weight:300;letter-spacing:0.5px;}
.v_his li img {width:120px}




#warphead h2{top:220px !important;font-size:16px;font-weight:200;color:#FFFFFF;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:20px;letter-spacing: -2px;position: relative;}

#gnb_menu_left {position:fixed;top:0;left:0;width:180px;background-color:#eeeeee;border-right:1px solid #dddddd;z-index:100000;height:100%;display:none;}
#top_menu .menu li a:hover, #top_menu .menu ul li:hover a{
/*color:#ffffff;*/
text-decoration:none;
}
#top_menu {display: none;}
#top_menu .menu ul li .new{
color:#ffffff;
/*background-color:#ffffff;*/
font-size:11px;
font-weight:normal;
z-index:10000;
padding:0 0px;
}
#top_menu .menu li ul{
/*background: rgba(255,255,255,0.8);*/
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
/*position:absolute;*/

z-index:200;
/*top:1em;
/*left:0;*/
}

#top_menu .menu li ul{
display:table; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
clear:both;
/*border-bottom:1px solid #11668d;
border-left:1px solid #11668d;
border-right:1px solid #11668d;*/
}

#top_menu_m .menu_m li li {
background:rgba(230,230,230,0.4);
border:0px;
border-bottom:1px solid rgba(200,200,200,0.4);
margin:0px;
padding:3px;
color:#dddddd;
font-size:12px;
}

#top_menu .menu li:hover li a{
background:none;
}

#top_menu .menu li ul a{
/*display:block;*/
line-height:16px;
font-size:12px;
font-style:normal;
font-weight:400;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
color:#aaaaaa;
}

/*#top_menu .menu li ul a:hover, #top_menu .menu li ul li:hover a{
background:rgba(255,255,255,1);
border:0px;
color:#11668d;
text-decoration:none;
}*/
.conleft .conleft_box {clear:both;position:relative;width:85%;margin:0px auto;padding:10px;}
.conleft .conleft_box li{float:left;color:#878787;font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; height:20px;zoom:1;*margin-left:10px;padding:10px;}

/* 자료실 탭 */
.conleft {background-color:#ffffff;border:px solid #dddddd;}
.conright {position:relative;background-color:#ffffff;border:1px solid #dddddd; /*background:url("/img/free_view_03.png") 0px 0px no-repeat;*/background-color:rgb(120,121,25);}
.conleft ul {float:left;font-size:12px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;margin-left:0px;width:100%;line-height:43px;border-bottom:1px solid #eeeeee;}
.conleft ul.conleft_tab {float:left;position:relative;width:100%; height:43px;padding:0px;text-align:left;}
.conleft ul.conleft_tab li { display:inline-block; *display:inline; *zoom:1; margin-left:-3px; *margin-left:0px; font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li a{color:#878787; padding:0px 10px 0px 6px; 
font: 100% 'Noto Sans KR', sans-serif,"바른나눔고딕","NanumBarunGothic","Nanum Barun Gothic", "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px;}
.conleft ul.conleft_tab li:first-child a { border-left:none;  }
.conleft ul.conleft_tab li.last-col {  margin-right:11px }
.conleft ul.conleft_tab li a.all_t { }	
.conleft ul.conleft_tab li a.design_t { } 
.conleft ul.conleft_tab li a.htmlcss_t { }
.conleft ul.conleft_tab li a.php_t{ }
.conleft ul.conleft_tab li a.logo_t{ }
.conleft ul.conleft_tab li a.plan_t{ }
.conleft ul.conleft_tab li a.site_t{ }
.conleft ul.conleft_tab li a:hover { color:#061834;font-weight:bold;}
.conleft ul.conleft_tab li.on a { color:#061834;font-weight:bold;border-bottom:4px solid #061834;padding-bottom:8px;}
button {margin:10px;}
body {margin:0;font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;/*background:url("/img/back_05_my.jpg") fixed;-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/}
td {width:100px;text-align:center;font-size:13px;font-weight:200;margin:0 auto;line-height:20px;border-bottom:1px solid #dddddd;padding:10px;background-color: #fafafa}

th {line-height:40px;font-size:16px;font-weight:500;margin:0 auto;border-bottom:1px solid #dddddd;background-color:#ffffff;}
h1 {top:110px !important;
		text-align:center;
		color:#00ab33;
		font-size:30px;
		margin:0px 0;
		line-height:50px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		font-weight:lighter;			
		letter-spacing:-1px;
	}
h2 {
		top:120px !important;
		font-size:15px;
		font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;
		color: #343434;
		font-weight:500;
		/*text-align:center;*/
		letter-spacing:-1px;
	}
	p {color:#00000;font-size:12px;}
	#warpmain {position:absolute;width:100%;padding:0px;margin:0px auto;height:50px;/*background:url("/img/main_top_back_01.jpg") 0px 0px no-repeat;background-color:#f2f4f7*/}
#warp {position:relative;width:100%;height:300px;background-color:#ffffff;padding:0px;margin:0px;display:table;background:url("/img/main_top_back_01.jpg") 0 0px no-repeat;}
#warphead {position:relative;width:100%;padding:0px;margin:0px auto;/*background:url("/img/main_top_01.jpg") 0px 0px no-repeat #000000;background-position: center; */background-color:#194858;z-index:-1;padding-bottom: 92px;height: 840px;}
#warpsub{position:relative;width:100%;height:50px;padding:0px;margin:0px auto;/*background:url("/img/sub_back_top_.jpg") 0px 0px no-repeat;*/}
#warp h1{padding-top:50px;padding-bottom:10px;font-size:60px;font-weight:300;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;position:relative;}
#warp h2{padding-top:0px;font-size:35px;font-weight:200;color:#ffffff;text-align:center;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;line-height:36px;}
#con_pf {width:100%;margin:0px auto;clear:both;padding:0px;display:table;}

.conright {clear:both;width:100%;height:240px;display:table;}
#top_gnb {position:relative;width:100%;height:32px;border-bottom:1px solid #00bd39;background-color:rgba(255,255,255,0.9)}
#top_gnb .gnb {margin:0 auto;color:#00bd39;font-weight:600}
#top_gnb .gnb ul {line-height:32px;float:right}
#top_gnb .gnb ul li {float:left;padding:0 10px;font-size:12px;}
#top_logo {position:relative;width:100%;height:50px;background-color:rgba(6,24,52,0.5);}
#top_logo .logo{position:relative;max-width:800px;font-size:20px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:bold;color:#ffffff;line-height:50px;text-align:center;letter-spacing:1px}
#top_logo .logo .kor{font-size:0px;margin:0 auto;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;font-weight:100;color:#ffffff;text-align:center;letter-spacing:2px}
#top_menu_m {width:100%;border-bottom:1px solid rgba(0,189,57,0.9);background-color:rgba(255,255,255,0.9);top:0;z-index:20000;line-height:50px;-webkit-backdrop-filter: saturate(180%) blur(5px);min-height:50px;z-index: 999999}
#top_menu_m #logo{position:absolute;top:0px;left:20px;z-index:3000;line-height:50px;z-index: 99999}
#top_menu_m #logo a {color:#00bd39;font-weight:bold;}
#top_menu .menu {position:relative;max-width:800px;margin:0 auto;display:none;}
#top_menu_m .button_m {position:absolute;max-width:800px;margin:0 auto;padding-right:15px;font-size:15px;color:#00bd39;font-weight:900;right:15px;z-index:200000;cursor:pointer}
#top_menu_m .menu_m {position:relative;max-width:800px;margin:0 auto;padding:50px 0px 20px 0px;z-index: 9999}
#top_menu_m .php_s_m {color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;text-align:center;}
#top_menu_m .php_s_m li {color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:36px;margin:0 20px;border-bottom:1px solid rgba(200,200,200,0.3);position: relative;}
#top_menu_m .php_s_m li a {position: relative;color:#00bd39;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
#top_menu_m .nomarl_s_m {color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;text-align:center;}
#top_menu_m .nomarl_s_m li {color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;line-height:36px;margin:0 20px;border-bottom:1px solid rgba(200,200,200,0.3);position: relative;}
#top_menu_m .nomarl_s_m li a {color:#000000;font-weight:400;font-size:14px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;}
.new {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ffff00;padding:3px;color:#000000;top:10px;left:10px;margin:4px;}
.sample {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ffff00;padding:3px;color:#000000;top:10px;left:10px;margin:4px;}
.sample2 {font-family:"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-size:10px;border-radius:5px;background-color:#ff0000;padding:3px;color:#ffffff;top:-15px;height:14px;line-height:14px;margin:4px;}

.f-navm {z-index:9999; position:fixed; left:0; top:0; width:100%;}

#con_pf {width:100%;margin:0px auto;clear:both;display:table;}
.conleft {clear:both;width:100%;height:220px;}
.conright {clear:both;width:100%;height:220px;}
#footer {position:relative;width:100%;height:100px;background-color:#343434;padding-bottom:50px;}
#footer_bar {position:relative;width:100%;background-color:#343434;border-top:1px solid #111111;border-bottom:0px solid #dddddd;}
#footer_bar .notice{width:100%;margin:0px auto;padding:0 0px;line-height:35px;font-size:12px;}
#footer_bar .notice li span{padding:0 10px;font-weight:600;}
#bottom_a{max-width:100%;margin:0px auto;padding:20px 10px;font-size:14px;color:#dddddd;}
#bottom_a p{color:#eeeeee;padding:5px 0px;}

#container {width:100%;margin:0px auto;padding:20px 0;display:table;}
#content_main  {width:350px;margin:0px auto; background-color:#ffffff;padding:20px 0;/*background:url("/img/main_back_01.jpg") center 0px no-repeat;*/position: relative;} 
#content  {width:100%;margin:0px auto; background-color:#ffffff;padding:0px;} 
img {padding:0 0 20px 0;}
#content h1{padding-top:70px;font-size:27px;font-weight:700;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;letter-spacing: -2px;line-height: 34px;}
#content h2{padding-top:3px;font-size:20px;font-weight:300;color:#222222;text-align:center;font-family:'Noto Sans KR', sans-serif, "나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;}

#con_bn {width:100;margin:0px auto;padding:0px;clear:both;display:table;background-color:#ffffff;z-index: 0;}  
#con_bn .conbl {width:100%x;}

#con_bn .conbr {position:relative;width:100%;float:left;height:198px;;border:1px solid #dddddd; /*background:url("/img/free_view_04.png") 0px 0px no-repeat*/;background-color:rgb(71,55,25);display:inline;left:20px;transition: 0.4s}
/*#con_bn .conbr .on_txt{display:nonewidth:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}*/
/*#con_bn .conbr .on_txt{display:none}
#con_bn .conbr .on_txt .picdate{display:none }
#con_bn .conbr .on_txt .title{display:none}*/
#con_bn .conbr .on_txt{display:table;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
#con_bn .conbr .on_txt .picdate{display:display;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
#con_bn .conbr .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}
/*.conright .on_txt {display:none}
.conright .on_txt .picdate{display:none }
.conright .on_txt .title{display:none}*/
.on_txt{display:block;width:100%;position:absolute;height:50px;background-color:rgba(0,0,0,0.6);bottom:0px;}
.conright .on_txt .picdate{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:12px;padding:5px 0 2px 10px;}
.conright .on_txt .title{display:block;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;color:#ffffff;font-size:14px;padding:2px 0 2px 10px;font-weight:bold;}

#content .box {font-size:12px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px; }
#content .box2 {font-size:14px;text-align:center;color: #000000;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic;padding:10px;  }
.row {
		text-align:center;
	}
.span3 > p { font-size:12px;letter-spacing:-1px;}
.youtube {position:relative;margin-bottom:20px;overflow:hidden;background:transparent;padding: 20px 0px;}
.youtube .lat_title {display:block;line-height:45px;font-size:20px;color:#253dbe}
.youtube .lat_title a {position:relative;color:#000000;display:inline-block}

.youtube ul {padding:10px 0px;display: block;display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 10px;
}

.youtube li {position:relative;line-height:18px;margin-bottom:10px;float: left;width: 100%;height: 360px;transition: 0.4s ease;z-index: 0;top:0px;left: 0px;margin-right: 5px;padding: 0px !important;overflow: hidden;background-color: #fafafa;margin-right: 0px;}
.youtube li span {padding: 0px 10px;display: block;font-weight: 700;position: relative;transition: 0.4s;z-index: 99999;font-size: 14px;line-height: 20px;top:0px;}
.youtube li:nth-child(3) {margin-right: 0px;}
.youtube li img {width:100%;transition: 0.4s ease;z-index: 0;position: relative;transition: 0.4s }
.youtube li:hover {z-index: 10;background-color: #f2f2f2;width: 100%;top:0px;border-radius: 10px;box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);transform: scale(1);left:0px;position: relative;overflow: hidden;}
.youtube li:hover img {z-index: 10;transform: scale(1);left:0px;position: relative;overflow: hidden;filter: brightness(100%);}
.youtube li:hover span {padding: 0px 10px;display: block;position: relative;transition: 0.4s;z-index: 99999;color: #000000;font-weight: 900:font-size:20px;top:0px;}
.youtube li:nth-child(1):hover {left:0px;}
.youtube li:nth-child(3):hover {left:0px;}

.youtube li a {font-weight:300;font-size:14px;line-height:18px;vertical-align:middle;color: #e1e1e1}
.youtube li a:hover {color:#3a8afd}
.youtube li .fa-heart {color:#ff0000}
.youtube li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.youtube li .new_icon {display:block;font-size:11px;font-weight:900;color:#ffffff;background:#ff8100;text-align:center;margin-left:2px;vertical-align:middle;top:0px;position: absolute;left:0px;padding: 0px;/*transform: rotate(45deg);*/height: 29px;line-height: 29px;margin: 0px;z-index: 9999;width: 80px;letter-spacing: -1px;border-radius: 0px 20px 20px 0px;}
.youtube li .new_icon::before {
    /*  content: '';
      border-right: 26px solid transparent;

    border-bottom: 26px solid #ff0047;
*/
    /* background: transparent; */
  /*  position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
   /* top: -10px;
    right: -37px;*/}
.youtube li .new_icon::after {/*border-bottom: 26px solid #ff0047;
    width: 0px;
    border-left: 26px solid transparent;
    height: 0px;*/
    /* background: transparent; */
    /*content: '';
    position: relative;*/
    /* width: 0px; */
    /* height: 0px; */
   /* top: -10px;
    left:-37px;*/}
.youtube li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-caret-right {color:#bbb}
.youtube li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.youtube li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.youtube .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.youtube .empty_li:before {background:none;padding:0}

.youtube .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.youtube .lt_more {position:absolute;top:11px;right:0;display:block;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.youtube .lt_more:hover {color:#777}
.service_guide_03{padding:0px;margin:0 auto;position: relative;width: 100%;}
.service_guide_03 div {font-size:16px;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;font-weight:200;line-height: 26px;padding: 10px 0px;margin: 0px auto;}
.service_guide_03_01 {padding: 10px;}
.service_guide_03 div h3 {padding:20px 0;font-size:20px;font-weight:600;font-family:'Noto Sans KR', sans-serif,"나눔고딕",NanumGothic,"맑은고딕",Malgun Gothic;color: #000000;}
.service_guide_03 div li{padding:20px 0;color:#343434}
.service_guide_03 hr {clear:both;width:100%;border:0px;border-bottom:1px solid #dddddd;padding:20px 0;}
.service_guide_03 div li span {font-weight:500;color:#000000}
}
@media (max-width:500px){
	.youtube {position:relative;margin-bottom:20px;overflow:hidden;background:transparent;padding: 20px;}

	.basic_li {padding: 20px;display: table;}

}
@charset "utf-8";

/* 새글 스킨 (latest) */
.notice {position:relative;padding:15px 0px}
.notice h2 {margin-bottom:20px}
.notice h2 a {font-size:1.2em;color:#fff}
.notice li {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.notice li a, .notice li.empty_li {color:#eeeeee;padding:1px 0;display:inline-block;font-weight: 900;}
.notice li .lock_icon {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size: 12px;border:1px solid #a2c6ce;vertical-align:baseline}
.notice li .new_icon {display:inline-block;line-height:16px;width:16px;font-size:0.833em;color:#ffff00;background:#6db142;text-align:center;margin-right:3px;border-radius:2px;vertical-align:baseline}
.notice .cnt_cm {background:#5c85c1;color:#fff;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;white-space:nowrap;margin-left:5px}
.notice li.empty_li {border-bottom:0;line-height:120px}
/* 새글 스킨 (latest) */
.lat {position:relative;margin-bottom:20px;overflow:hidden;background:#fff}
.lat .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.lat .lat_title a {position:relative;color:#000;display:inline-block}

.lat ul {padding:10px 0}
.lat li {position:relative;line-height:18px;border-bottom:1px solid #e5ecee;margin-bottom:10px}
.lat li a {line-height:24px;font-weight:bold;font-size:1.2em;line-height:20px;vertical-align:middle}
.lat li a:hover {color:#3a8afd}
.lat li .fa-heart {color:#ff0000}
.lat li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.lat li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.lat li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-caret-right {color:#bbb}
.lat li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.lat .empty_li:before {background:none;padding:0}

.lat .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.lat .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.lat .lt_more:hover {color:#777}

#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

@media (min-width:1921px){
#warphead:after {
/*    content: '';
    width: 450px;
    height: 450px;
     background:linear-gradient(to left,  rgba(0,0,0,0) 50px,  rgba(0,0,0,1) 350px);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
       transition:all 0.3s ;*/
}
#warphead:before {
  /*  content: '';
    width: 450px;
    height: 450px;*/
   /* background-image: -webkit-gradient(linear,right top,left top,from(#000000),to(transparent));*/
   /* background:linear-gradient(to right,rgba(0,0,0,0) 50px,  rgba(0,0,0,1) 350px);
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
       transition:all 0.3s ;*/
}
}
@media (max-width:1920px){
    #warphead:after {
   /* content: '';
    width: 450px;
    height: 450px;
     background:linear-gradient(to left,  rgba(0,0,0,0) 50px,  rgba(0,0,0,0) 350px);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    transition:all 0.3s ;*/
}
#warphead:before {
   /* content: '';
    width: 450px;
    height: 450px;*/
   /* background-image: -webkit-gradient(linear,right top,left top,from(#000000),to(transparent));*/
    /*background:linear-gradient(to right,rgba(0,0,0,0) 50px,  rgba(0,0,0,0) 350px);
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
       transition:all 0.3s ;*/
}
}