@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Roboto&display=swap');

* {padding:0;margin:0;}
body,th,td,textarea,h1,h2,h3,h4,h5,h6 {font-family: 'Roboto', 'Nanum Gothic', sans-serif;font-size:12px;}
body,th,td,textarea{ line-height:14px;}
img,fieldset{ border:0;}
li{ list-style:none;}
select,input{ font-family: 'Roboto', 'Nanum Gothic', sans-serif;color:#555;font-size:1.00em;}
address,em{ font-style:normal;}
button{ border:none;background:none;cursor:pointer;}
hr,legend{ display:none;}
p,h1,h2,h3,h4,h5,h6,form,input,ul,li,dl,dt,dd {margin:0;padding:0;}
a img {vertical-align:top;}
a:link{color:#555;text-decoration:none;}
a:visited{color:#555;text-decoration:none;}
a:hover{color:#555;text-decoration:none;}



#wrap{width:100%;position:relative;}

/* main Àü¿ë css */
#content_wrap_main{width:100%;height:100%;padding:0px 0 0 0;position:absolute;bottom:0;text-align:left;margin:0 auto;}
#content_wrap_main > .flexslider{position:absolute;bottom:0;left:0;width:75%;height:auto;margin:0;padding:0;box-sizing:border-box;}
#content_wrap_main > #footer_wrap{position:absolute;right:0;bottom:0;width:25%;padding-right:5%;box-sizing:border-box;padding-bottom:4px;}

/* footer °øÅë*/
#footer_wrap{width:100%;height:auto;position:relative;text-align:right;}
.content_footer{position:relative;text-align:left;margin:0 auto;vertical-align:top;text-align:right;}
.content_footer > ul > li{padding-top:8px;line-height:11px;}
.content_footer > ul > li,.content_footer > ul > li a{font-size:11px;color:#999;}
.content_footer > ul > li > span + span{padding-left:-80px;}
.content_footer > ul > li > span + span:before{content:"";display:inline-block;margin-right:8px;width:1px;height:11px;background:#ccc;vertical-align:middle;}
  /* up and down */

.upNdown{display:none;position:fixed;bottom:50px;right:10px;}
.upNdown > p{text-align:center;cursor:pointer;margin-top:5px;}
.upNdown > p > span{display:block;font-size:10px;color:#555;width:45px;height:45px;line-height:45px;background:rgba(255,255,255,0.8);border:1px solid #e5e5e5;}

#header{position:relative;width:100%;height:auto;margin:0 auto;padding-top:80px;z-index:999;}
#topmenu{width:90%;height:auto;position:relative;text-align:left;margin:0px auto 0;}
#topmenu:after{content:"";display:block;clear:both;}
#topmenu h1{position:relative;float:left;margin:0px 0 0;transform:translateY(0px);padding-bottom:10px;transition:all 0.3s;}
#topmenu h1:hover{transform:translateY(0px);}
#topmenu h1 img{width:auto;height:50px;-ms-interpolation-mode: bicubic;  }

/* nav */
#topmenu > .nav{float:right;}
#topmenu > .nav > ul > li{display:inline-block;position:relative;margin:-35px 26px;vertical-align:top;font-size:14px;letter-spacing:1px;}
#topmenu > .nav > ul > li:first-of-type{margin-left:0;}
#topmenu > .nav > ul > li:last-of-type{margin-right:0;}
#topmenu > .nav > ul > li > a{display:inline-block;font-size:14px;line-height:26px;color:#555;padddng:0 5px;transition:all 0.3s;}
#topmenu > .nav > ul > li.hoverrr:hover > a{color:#999;}
#topmenu > .nav > ul > li > a::after{content:"";display:block;position:absolute;left:0;width:0px;height:1px;background:#999;z-index:999;transition:all 0.3s;}
#topmenu > .nav > ul > li > .sub_cate{position:absolute;left:0;width:0;height:0;min-width:100%;margin-top:0px;padding:0px 0px 0px 0px;border:0px solid #ddd;border-radius:0 20px 0 20px;background:rgba(255,255,255,0);overflow:hidden;transition:all 0.3s;}
#topmenu > .nav > ul > li.hoverrr:hover > .sub_cate{width:auto;height:auto;padding:10px 15px 10px 15px;border:1px solid #ddd;background:rgba(255,255,255,0.8);}
#topmenu > .nav > ul > li > .sub_cate > li{display:block;font-size:12px;padding:0 0 10px 0;letter-spacing:0.5px;padding-left:0;white-space:nowrap;}
#topmenu > .nav > ul > li > .sub_cate > li:last-of-type{padding-bottom:0;}
#topmenu > .nav > ul > li > .sub_cate > li > a{display:block;font-size:12px;color:transparent;transform:translateX(0px);transition:all 0.3s;}
#topmenu > .nav > ul > li.hoverrr:hover > .sub_cate > li > a{color:#555;}
#topmenu > .nav > ul > li > .sub_cate > li:hover > a{transform:translateX(5px);color:#999;}
  /* ¸¶Áö¸· ´ëºÐ·ù css */
#topmenu > .nav > ul > li:last-of-type  > a::after{left:auto;right:0;}
#topmenu > .nav > ul > li:last-of-type > .sub_cate{left:auto;right:0;border-radius:20px 0 20px 0;text-align:right;transition:all 0.3s;}
#topmenu > .nav > ul > li:last-of-type > .sub_cate > li{text-align:right;}
#topmenu > .nav > ul > li:last-of-type > .sub_cate > li:hover > a{transform:translateX(-5px);}


/* ==== sub ==== */
#content_wrap_sub{max-width:1200px;width:90%;margin:100px auto 0px;}
.sub_contents{width:100%;padding-top:80px;}
  /* sub title :: °øÅë */
.subTitle{text-align:center;}
.subTitle h2{font-weight:normal;font-size:24px;letter-spacing:2px;}
.subTitle h2 span{position:relative;display:inline-block;font-weight:normal;padding-bottom:15px;}
.subTitle h2 span:after{content:"";display:block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;height:2px;background:#ffffff;padding:0 10px;}

  /* sub footer */
.subWrap > #footer_wrap{max-width:1200px;width:90%;margin:40px auto;}
  
  /* about page */
.aboutP{max-width:1980px; width:100%;text-align:center;}
.aboutP p{text-align:center;}
.aboutP p > img{max-width:100%;height:auto;text-align:center;}
.aboutCateWrap{position:relative;width:100%;text-align:center;}
.aboutCateWrap > ul{display:inline-block;text-align:center;}
.aboutCateWrap > ul:after{content:'';display:block;clear:both;}
.aboutCateWrap > ul > li{float:left;position:relative;padding:0px 0px 0;margin:-40px 20px 60px;color:#aaa;font-size:14px;}
.aboutCateWrap > ul > li > a{color:#aaa;font-size:14px;}
.aboutCateWrap > ul > li:hover > a{color:#000;}
.aboutCateWrap > ul > li:before{opacity:0;content:'';display:inline-block;position:absolute;top:-10px;left:50%;width:4px;height:4px;margin-left:-4px;background:#000;}
.aboutCateWrap > ul > li:hover:before{opacity:1;}




  /* guide page */
.guideP{width:100%;text-align:center;}
.guideP p{text-align:center;}
.guideP p > img{max-width:100%;height:auto;}





@media screen and (max-width: 1450px) {
#wrap{height:auto !impotant;}

/* main Àü¿ë css */
#content_wrap_main{position:relative;height:auto;margin-top:160px;}
#content_wrap_main > .flexslider{position:relative; width:92%;margin:0 auto;}
#content_wrap_main > #footer_wrap{position:relative;width:90%;padding:40px 0 20px;margin:0 auto;font-align:right;}
#content_wrap_main > #footer_wrap .content_footer{font-align:right;}
}

@media screen and (max-width: 979px) {
#topmenu > .nav > ul > li.click > a{color:#999;}
#topmenu > .nav > ul > li.click > a::after{content:"";display:block;width:100%;height:1px;background:#ffffff;}
#topmenu > .nav > ul > li.click > .sub_cate{width:auto;height:auto;padding:10px 15px 10px 15px;border:1px solid #ddd;background:rgba(255,255,255,0.8);}
#topmenu > .nav > ul > li.click > .sub_cate > li > a{color:#555;}


#topmenu > .nav > ul > li{}
}


@media screen and (max-width: 767px) {
#topmenu h1{float:none;text-align:center;}
#topmenu > .nav{float:none;width:100%;text-align:center;}
#topmenu > .nav > ul > li{margin:0 13px;font-size:12px;}
#topmenu > .nav > ul > li > a{font-size:12px;line-height:18px;}
#topmenu > .nav > ul > li > .sub_cate{text-align:left;}

/* main Àü¿ë css */
#content_wrap_main{margin-top:66px;}
#content_wrap_main > #footer_wrap{padding:80px 0 20px;}

/* footer °øÅë*/
.content_footer > ul > li{padding-top:6px;line-height:10px;}
.content_footer > ul > li,.content_footer > ul > li a{font-size:10px;}
.content_footer > ul > li > span + span:before{height:9px;}

/* ==== sub ==== */
#content_wrap_sub{margin:70px auto 0px;}
.sub_contents{padding-top:40px;}

  /* sub title :: °øÅë */
.subTitle h2{font-weight:normal;font-size:18px;}
.subTitle h2 span{padding-bottom:10px;}

  /* sub footer */
.subWrap > #footer_wrap{margin:80px auto 20px;}
}

@media screen and (max-width: 500px) {
#topmenu > .nav > ul > li{margin:0 7px;font-size:0.9em;}
#topmenu > .nav > ul > li > a{font-size:0.9em;}
#topmenu > .nav > ul > li > .sub_cate > li{font-size:0.9em;}
#topmenu > .nav > ul > li > .sub_cate > li > a{font-size:0.9em;}

/* footer °øÅë*/
.content_footer > ul > li,.content_footer > ul > li a{font-size:0.8em;}
.content_footer > ul > li > span + span:before{height:0.8em;}
}

@media screen and (max-width: 320px) {
#topmenu > .nav > ul > li{margin:0 3px;font-size:0.8em;}
#topmenu > .nav > ul > li > a{font-size:0.8em;}
#topmenu > .nav > ul > li > .sub_cate > li{font-size:0.8em;}
#topmenu > .nav > ul > li > .sub_cate > li > a{font-size:0.8em;}
}